/* ===========================================================
   arena plus app - Core Stylesheet (design-7172.css)
   Prefix: ui17-
   Palette: #87CEEB | #40E0D0 | #B22222 | #1A1A2E | #B0E0E6
   Mobile-first, root font 62.5%, rem units
   =========================================================== */

:root{
  --ui17-primary:#40E0D0;
  --ui17-accent:#B22222;
  --ui17-sky:#87CEEB;
  --ui17-powder:#B0E0E6;
  --ui17-bg:#1A1A2E;
  --ui17-bg-soft:#232347;
  --ui17-bg-card:#2a2a4a;
  --ui17-text:#F5FAFF;
  --ui17-text-muted:#B0E0E6;
  --ui17-line:rgba(176,224,230,0.18);
  --ui17-radius:14px;
  --ui17-shadow:0 6px 22px rgba(0,0,0,0.35);
}

*{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%,#232347 0%,#1A1A2E 55%,#10101f 100%);
  color:var(--ui17-text);
  line-height:1.5rem;
  font-size:1.5rem;
  overflow-x:hidden;
  min-height:100vh;
}
a{color:var(--ui17-sky);text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}

.ui17-container{width:100%;max-width:430px;margin:0 auto;padding:0 1.2rem;}
.ui17-wrapper{padding:1.6rem 0;}

/* ============ Header ============ */
.ui17-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg,rgba(26,26,46,0.98),rgba(26,26,46,0.92));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ui17-line);
}
.ui17-header-inner{
  max-width:430px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1.2rem;gap:.6rem;
}
.ui17-brand{display:flex;align-items:center;gap:.6rem;color:var(--ui17-text);}
.ui17-logo{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,#40E0D0,#87CEEB);
  display:flex;align-items:center;justify-content:center;
  color:#1A1A2E;font-weight:800;font-size:1.4rem;
}
.ui17-brand-name{font-size:1.5rem;font-weight:700;letter-spacing:.3px;}
.ui17-brand-name b{color:var(--ui17-primary);}
.ui17-head-actions{display:flex;align-items:center;gap:.5rem;}
.ui17-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:1.3rem;font-weight:700;
  padding:.6rem 1.2rem;border-radius:30px;border:none;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
  min-height:36px;color:#fff;
}
.ui17-btn:active{transform:scale(.96);}
.ui17-btn-primary{background:linear-gradient(135deg,#B22222,#e24b3a);box-shadow:0 4px 12px rgba(178,34,34,.4);}
.ui17-btn-ghost{background:transparent;border:1px solid var(--ui17-primary);color:var(--ui17-primary);}
.ui17-menu-toggle{
  background:transparent;border:none;color:var(--ui17-text);
  font-size:1.8rem;cursor:pointer;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
}

/* ============ Dropdown Nav ============ */
.ui17-nav{
  position:fixed;top:56px;left:0;right:0;z-index:999;
  background:rgba(26,26,46,0.98);
  border-bottom:1px solid var(--ui17-line);
  max-height:0;overflow:hidden;transition:max-height .3s ease;
}
.ui17-nav.open{max-height:420px;}
.ui17-nav-inner{max-width:430px;margin:0 auto;padding:1rem 1.2rem;}
.ui17-nav-title{font-size:1.2rem;color:var(--ui17-text-muted);margin:.6rem 0 .4rem;letter-spacing:.5px;}
.ui17-nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
.ui17-nav-grid a{
  display:block;padding:.7rem .9rem;font-size:1.3rem;
  background:var(--ui17-bg-card);border-radius:10px;color:var(--ui17-text);
  border-left:3px solid var(--ui17-primary);
}
.ui17-nav-grid a:active{background:#33335f;}

/* ============ Hero / Carousel ============ */
.ui17-main{padding-top:64px;}
.ui17-hero{margin:1.2rem 0;}
.ui17-carousel{
  position:relative;border-radius:var(--ui17-radius);overflow:hidden;
  box-shadow:var(--ui17-shadow);background:#0e0e1e;
}
.ui17-slides{display:flex;scroll-snap-type:x mandatory;overflow-x:auto;scrollbar-width:none;}
.ui17-slides::-webkit-scrollbar{display:none;}
.ui17-slide{
  flex:0 0 100%;scroll-snap-align:start;position:relative;cursor:pointer;
}
.ui17-slide img{width:100%;height:180px;object-fit:cover;}
.ui17-slide-caption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,transparent,rgba(26,26,46,.92));
  padding:.8rem 1rem;color:#fff;font-size:1.3rem;font-weight:600;
}
.ui17-hero-cta{
  margin-top:1rem;display:flex;gap:.6rem;flex-wrap:wrap;
}
.ui17-hero-cta .ui17-btn{flex:1;min-width:120px;}

.ui17-h1{
  font-size:2.2rem;line-height:1.35;color:#fff;margin:1.4rem 0 .6rem;font-weight:800;
}
.ui17-h1 b{color:var(--ui17-primary);}
.ui17-lead{font-size:1.4rem;color:var(--ui17-text-muted);margin-bottom:1rem;}

.ui17-section{margin:1.8rem 0;}
.ui17-section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1rem;
}
.ui17-section-title{
  font-size:1.7rem;font-weight:700;color:#fff;
  display:flex;align-items:center;gap:.5rem;
}
.ui17-section-title::before{
  content:"";width:4px;height:20px;border-radius:3px;
  background:linear-gradient(180deg,#40E0D0,#87CEEB);display:inline-block;
}
.ui17-section-title b{color:var(--ui17-primary);}
.ui17-more{font-size:1.25rem;color:var(--ui17-sky);}

/* ============ Game Grid ============ */
.ui17-cat-head{
  display:flex;align-items:center;gap:.6rem;margin:1.4rem 0 .8rem;
}
.ui17-cat-icon{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,#B22222,#e24b3a);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.6rem;
}
.ui17-cat-name{font-size:1.55rem;font-weight:700;color:#fff;}
.ui17-cat-name b{color:var(--ui17-primary);}
.ui17-cat-sub{font-size:1.2rem;color:var(--ui17-text-muted);margin-left:auto;}

.ui17-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;
}
.ui17-game{
  background:var(--ui17-bg-card);border-radius:12px;overflow:hidden;
  cursor:pointer;border:1px solid var(--ui17-line);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s;
}
.ui17-game:active{transform:scale(.96);border-color:var(--ui17-primary);}
.ui17-game img{width:100%;height:92px;object-fit:cover;background:#15152a;}
.ui17-game-name{
  padding:.5rem .4rem;font-size:1.15rem;color:var(--ui17-text);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ============ Cards / Features ============ */
.ui17-card{
  background:var(--ui17-bg-card);border:1px solid var(--ui17-line);
  border-radius:var(--ui17-radius);padding:1.2rem;margin-bottom:1rem;
  box-shadow:var(--ui17-shadow);
}
.ui17-card-title{font-size:1.5rem;font-weight:700;color:var(--ui17-primary);margin-bottom:.6rem;}
.ui17-card p{font-size:1.35rem;color:var(--ui17-text);margin-bottom:.6rem;line-height:1.55rem;}
.ui17-card p a{color:var(--ui17-sky);font-weight:600;}

.ui17-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.ui17-feature{
  background:var(--ui17-bg-card);border-radius:12px;padding:1rem;
  border-top:3px solid var(--ui17-primary);
}
.ui17-feature .material-icons-outlined{font-size:2.4rem;color:var(--ui17-primary);}
.ui17-feature h3{font-size:1.4rem;color:#fff;margin:.4rem 0;}
.ui17-feature p{font-size:1.2rem;color:var(--ui17-text-muted);line-height:1.4rem;}

.ui17-steps{counter-reset:step;}
.ui17-step{
  display:flex;gap:.8rem;margin-bottom:.9rem;align-items:flex-start;
}
.ui17-step-num{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,#B22222,#e24b3a);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.3rem;
}
.ui17-step-body h4{font-size:1.4rem;color:#fff;margin-bottom:.2rem;}
.ui17-step-body p{font-size:1.25rem;color:var(--ui17-text-muted);}

/* ============ Testimonials / Winners ============ */
.ui17-tile-row{display:flex;gap:.6rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.4rem;}
.ui17-tile-row::-webkit-scrollbar{display:none;}
.ui17-tile{
  flex:0 0 200px;background:var(--ui17-bg-card);border-radius:12px;padding:.9rem;
  border-left:3px solid var(--ui17-accent);
}
.ui17-tile .ui17-tile-name{font-size:1.3rem;color:#fff;font-weight:700;}
.ui17-tile .ui17-tile-meta{font-size:1.1rem;color:var(--ui17-primary);margin:.2rem 0;}
.ui17-tile .ui17-tile-text{font-size:1.2rem;color:var(--ui17-text-muted);}

.ui17-winners .ui17-tile{border-left-color:var(--ui17-primary);}
.ui17-win-amt{color:#ffd54a;font-weight:800;font-size:1.5rem;}

/* ============ Payment ============ */
.ui17-pay-row{display:flex;flex-wrap:wrap;gap:.5rem;}
.ui17-pay{
  flex:1 1 30%;background:var(--ui17-bg-card);border-radius:10px;
  padding:.7rem;text-align:center;border:1px solid var(--ui17-line);
  font-size:1.15rem;color:var(--ui17-text);
}
.ui17-pay .bi{font-size:1.6rem;color:var(--ui17-primary);display:block;margin-bottom:.2rem;}

/* ============ Promo / CTA ============ */
.ui17-cta-box{
  background:linear-gradient(135deg,#B22222,#7a1818);
  border-radius:var(--ui17-radius);padding:1.4rem;text-align:center;
  box-shadow:var(--ui17-shadow);margin:1.4rem 0;
}
.ui17-cta-box h3{font-size:1.8rem;color:#fff;margin-bottom:.4rem;}
.ui17-cta-box p{font-size:1.3rem;color:#ffe;margin-bottom:1rem;}

.ui17-link-text{color:var(--ui17-primary);font-weight:700;cursor:pointer;}
.ui17-link-text:hover{text-decoration:underline;}

/* ============ FAQ ============ */
.ui17-faq-item{
  background:var(--ui17-bg-card);border-radius:10px;margin-bottom:.6rem;
  border:1px solid var(--ui17-line);overflow:hidden;
}
.ui17-faq-q{
  width:100%;text-align:left;background:transparent;border:none;color:#fff;
  padding:1rem;font-size:1.35rem;font-weight:600;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
}
.ui17-faq-q .bi{color:var(--ui17-primary);transition:transform .2s;}
.ui17-faq-item.open .ui17-faq-q .bi{transform:rotate(45deg);}
.ui17-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 1rem;}
.ui17-faq-item.open .ui17-faq-a{max-height:240px;padding:0 1rem 1rem;}
.ui17-faq-a p{font-size:1.25rem;color:var(--ui17-text-muted);line-height:1.5rem;}

/* ============ Footer ============ */
.ui17-footer{
  background:#10101f;border-top:1px solid var(--ui17-line);
  padding:2rem 0 1rem;margin-top:2rem;
}
.ui17-footer-brand{
  font-size:1.6rem;font-weight:800;color:#fff;margin-bottom:.6rem;
}
.ui17-footer-brand b{color:var(--ui17-primary);}
.ui17-footer-desc{font-size:1.25rem;color:var(--ui17-text-muted);margin-bottom:1.2rem;line-height:1.5rem;}
.ui17-footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.2rem;}
.ui17-footer-col h4{font-size:1.3rem;color:var(--ui17-primary);margin-bottom:.5rem;}
.ui17-footer-col a{display:block;font-size:1.2rem;color:var(--ui17-text);padding:.25rem 0;}
.ui17-footer-col a:hover{color:var(--ui17-sky);}
.ui17-footer-promo{
  display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0;
}
.ui17-footer-promo .ui17-btn{flex:1 1 45%;min-width:130px;}
.ui17-copy{
  text-align:center;font-size:1.1rem;color:var(--ui17-text-muted);
  border-top:1px solid var(--ui17-line);padding-top:1rem;margin-top:1rem;
}

/* ============ Mobile Bottom Nav ============ */
.ui17-bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg,#B22222,#7a1818);
  display:flex;justify-content:space-around;align-items:center;
  height:60px;border-top:2px solid #40E0D0;
  box-shadow:0 -4px 14px rgba(0,0,0,0.4);
}
.ui17-bottom-nav a,.ui17-bottom-nav button{
  flex:1;background:transparent;border:none;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:60px;min-height:60px;cursor:pointer;
  font-size:1.05rem;gap:.15rem;transition:transform .15s,color .15s;
}
.ui17-bottom-nav a:active,.ui17-bottom-nav button:active{transform:scale(.92);}
.ui17-bottom-nav .material-icons-outlined,
.ui17-bottom-nav .ion-icon{font-size:24px;}
.ui17-bottom-nav .fas,.ui17-bottom-nav .far{font-size:22px;}
.ui17-bottom-nav .active{color:#ffe14a;}
.ui17-bottom-nav .badge{
  position:absolute;top:6px;right:18px;background:#40E0D0;color:#1A1A2E;
  font-size:.9rem;font-weight:700;border-radius:50%;width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
}

/* ============ Mobile padding ============ */
@media (max-width:768px){
  .ui17-main{padding-bottom:80px;}
}

/* ============ Desktop ============ */
@media (min-width:769px){
  .ui17-container{max-width:960px;}
  .ui17-header-inner{max-width:960px;}
  .ui17-nav-inner{max-width:960px;}
  .ui17-grid{grid-template-columns:repeat(6,1fr);}
  .ui17-feature-grid{grid-template-columns:repeat(4,1fr);}
  .ui17-slide img{height:320px;}
  .ui17-bottom-nav{display:none;}
  .ui17-footer-cols{grid-template-columns:repeat(4,1fr);}
  .ui17-desktop-nav{display:flex !important;gap:1rem;align-items:center;}
  .ui17-desktop-nav a{color:var(--ui17-text);font-size:1.3rem;}
  .ui17-menu-toggle{display:none;}
}
.ui17-desktop-nav{display:none;}