/* ============================================================
   f8bet app - Core Base Stylesheet (prefix: g2fe-)
   Mobile-first HTML5 gaming site. Max width 430px on phones.
   Color palette: #0C0C0C bg + #ADD8E6 / #BAE1FF / #FFCCCB / #87CEFA
   ============================================================ */

:root{
  --g2fe-bg:#0C0C0C;
  --g2fe-bg-soft:#15171b;
  --g2fe-card:#1b1e24;
  --g2fe-primary:#ADD8E6;
  --g2fe-secondary:#87CEFA;
  --g2fe-accent:#BAE1FF;
  --g2fe-soft:#FFCCCB;
  --g2fe-text:#f3f7fb;
  --g2fe-muted:#aab4c2;
  --g2fe-gold:#ffd27a;
  --g2fe-grad:linear-gradient(135deg,#87CEFA 0%,#ADD8E6 55%,#FFCCCB 100%);
  --g2fe-radius:14px;
  --g2fe-shadow:0 6px 22px rgba(0,0,0,.45);
}

/* Reset */
*{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","Noto Sans",Arial,sans-serif;
  background:radial-gradient(circle at top,#1a2230 0%,var(--g2fe-bg) 70%);
  color:var(--g2fe-text);
  line-height:1.55;
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
a{color:var(--g2fe-secondary);text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}

/* Layout */
.g2fe-container{width:100%;padding:0 12px}
.g2fe-wrapper{padding:14px 12px}
.g2fe-section{margin:22px 0}
.g2fe-section h2{
  font-size:2rem;font-weight:800;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.g2fe-section h2::before{content:"";width:5px;height:20px;background:var(--g2fe-grad);border-radius:3px}
.g2fe-section h3{font-size:1.6rem;margin:10px 0 6px;color:var(--g2fe-accent)}
.g2fe-section p{font-size:1.4rem;color:var(--g2fe-muted);margin-bottom:8px}
.g2fe-text-link{color:var(--g2fe-secondary);font-weight:700;border-bottom:1px dashed rgba(135,206,250,.5)}

/* Header */
.g2fe-header{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;z-index:1000;
  background:rgba(12,12,12,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(173,216,230,.15);
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;
}
.g2fe-logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.7rem;color:#fff}
.g2fe-logo img{width:30px;height:30px;border-radius:8px}
.g2fe-logo span{background:var(--g2fe-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.g2fe-actions{display:flex;align-items:center;gap:8px}
.g2fe-btn{
  border:none;border-radius:20px;padding:7px 16px;font-size:1.3rem;font-weight:700;
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;
}
.g2fe-btn:active{transform:scale(.94)}
.g2fe-btn-login{background:transparent;color:var(--g2fe-primary);border:1px solid var(--g2fe-primary)}
.g2fe-btn-register{background:var(--g2fe-grad);color:#0C0C0C;box-shadow:var(--g2fe-shadow)}
.g2fe-menu-toggle{
  background:transparent;border:1px solid rgba(173,216,230,.3);color:var(--g2fe-primary);
  width:34px;height:34px;border-radius:8px;font-size:1.6rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* Expandable nav */
.g2fe-nav{
  position:fixed;top:52px;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;z-index:999;
  background:rgba(12,12,12,.98);
  max-height:0;overflow:hidden;transition:max-height .3s ease;
  border-bottom:1px solid rgba(173,216,230,.15);
}
.g2fe-nav.open{max-height:480px}
.g2fe-nav ul{padding:8px 12px}
.g2fe-nav li{border-bottom:1px solid rgba(255,255,255,.06)}
.g2fe-nav li:last-child{border-bottom:none}
.g2fe-nav a{
  display:flex;align-items:center;gap:10px;padding:12px 6px;font-size:1.4rem;color:var(--g2fe-text);
}
.g2fe-nav a i{color:var(--g2fe-secondary);width:22px;text-align:center}
.g2fe-nav a:active{background:rgba(135,206,250,.08)}

/* Hero / Carousel */
.g2fe-hero{margin-top:60px;padding:10px 12px 4px}
.g2fe-carousel{position:relative;border-radius:var(--g2fe-radius);overflow:hidden;box-shadow:var(--g2fe-shadow)}
.g2fe-slides{display:flex;scroll-snap-type:x mandatory;overflow-x:auto;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}
.g2fe-slides::-webkit-scrollbar{display:none}
.g2fe-slide{flex:0 0 100%;scroll-snap-align:center;position:relative}
.g2fe-slide img{width:100%;height:190px;object-fit:cover}
.g2fe-slide-cap{
  position:absolute;left:12px;bottom:10px;color:#fff;
  font-size:1.5rem;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.7);
  max-width:80%;
}
.g2fe-slide-cap small{display:block;font-size:1.15rem;font-weight:500;color:var(--g2fe-accent)}
.g2fe-dots{display:flex;gap:6px;justify-content:center;padding:8px 0}
.g2fe-dots span{width:8px;height:8px;border-radius:50%;background:rgba(173,216,230,.3);cursor:pointer}
.g2fe-dots span.active{background:var(--g2fe-grad);width:22px;border-radius:5px}

/* Quick promo banner */
.g2fe-cta-strip{
  display:flex;gap:8px;padding:6px 12px;overflow-x:auto;scrollbar-width:none;
}
.g2fe-cta-strip::-webkit-scrollbar{display:none}
.g2fe-cta-pill{
  flex:0 0 auto;background:var(--g2fe-card);border:1px solid rgba(173,216,230,.2);
  padding:8px 14px;border-radius:20px;font-size:1.25rem;color:var(--g2fe-primary);font-weight:700;
}

/* H1 */
.g2fe-h1{padding:6px 12px 4px}
.g2fe-h1 h1{font-size:2.1rem;font-weight:900;line-height:1.3;background:var(--g2fe-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Game list */
.g2fe-game-block{margin:18px 0}
.g2fe-game-block-title{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;margin-bottom:8px;
}
.g2fe-game-block-title h2{font-size:1.7rem;font-weight:800;display:flex;align-items:center;gap:8px}
.g2fe-tag{
  font-size:1.1rem;font-weight:700;color:#0C0C0C;padding:3px 9px;border-radius:10px;
  background:var(--g2fe-grad);
}
.g2fe-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 12px;
}
.g2fe-game-card{
  background:var(--g2fe-card);border-radius:12px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(173,216,230,.12);transition:transform .15s ease;
}
.g2fe-game-card:active{transform:scale(.95)}
.g2fe-game-card img{width:100%;aspect-ratio:1;object-fit:cover;background:#0e1116}
.g2fe-game-card span{
  display:block;font-size:1.15rem;color:var(--g2fe-text);
  padding:5px 6px;line-height:1.3;height:34px;overflow:hidden;
  text-align:center;
}

/* Feature / info cards */
.g2fe-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 12px}
.g2fe-card{
  background:var(--g2fe-card);border-radius:var(--g2fe-radius);padding:12px;
  border:1px solid rgba(173,216,230,.1);
}
.g2fe-card i{font-size:2.2rem;color:var(--g2fe-secondary);margin-bottom:6px}
.g2fe-card h3{font-size:1.4rem;color:var(--g2fe-accent);margin-bottom:4px}
.g2fe-card p{font-size:1.2rem;color:var(--g2fe-muted)}

/* Steps list */
.g2fe-steps{padding:0 12px;counter-reset:step}
.g2fe-step{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.g2fe-step-num{
  flex:0 0 28px;height:28px;border-radius:50%;background:var(--g2fe-grad);color:#0C0C0C;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.3rem;
}
.g2fe-step p{font-size:1.3rem;color:var(--g2fe-text)}

/* Payment / winners */
.g2fe-row{display:flex;gap:8px;overflow-x:auto;padding:4px 12px;scrollbar-width:none}
.g2fe-row::-webkit-scrollbar{display:none}
.g2fe-chip{
  flex:0 0 auto;background:var(--g2fe-card);padding:8px 12px;border-radius:10px;
  font-size:1.2rem;color:var(--g2fe-text);border:1px solid rgba(173,216,230,.15);
  display:flex;align-items:center;gap:6px;
}
.g2fe-chip i{color:var(--g2fe-gold)}

/* Testimonial */
.g2fe-quote{
  background:var(--g2fe-card);border-left:3px solid var(--g2fe-secondary);
  padding:10px 12px;border-radius:8px;margin:8px 12px;font-size:1.3rem;color:var(--g2fe-text);
}
.g2fe-quote b{display:block;color:var(--g2fe-accent);font-size:1.2rem;margin-top:4px}

/* Big play button */
.g2fe-play-cta{
  display:block;margin:18px 12px;padding:14px;text-align:center;
  background:var(--g2fe-grad);color:#0C0C0C;font-size:1.6rem;font-weight:900;
  border-radius:30px;box-shadow:var(--g2fe-shadow);
}

/* Footer */
.g2fe-footer{
  margin-top:24px;padding:18px 12px 24px;
  background:#07080a;border-top:1px solid rgba(173,216,230,.12);
}
.g2fe-footer-brand{font-size:1.3rem;color:var(--g2fe-muted);margin-bottom:10px}
.g2fe-footer-links{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.g2fe-footer-links a{
  font-size:1.2rem;color:var(--g2fe-primary);padding:4px 10px;
  background:rgba(173,216,230,.08);border-radius:14px;
}
.g2fe-promo-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.g2fe-promo-btn{
  flex:1 1 30%;min-width:90px;text-align:center;background:var(--g2fe-grad);color:#0C0C0C;
  padding:8px;font-size:1.2rem;font-weight:700;border-radius:18px;
}
.g2fe-copy{font-size:1.1rem;color:#5b6573;text-align:center;border-top:1px solid rgba(255,255,255,.05);padding-top:10px}

/* Bottom nav */
.g2fe-bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;height:62px;z-index:1000;
  background:rgba(7,8,10,.97);backdrop-filter:blur(10px);
  border-top:1px solid rgba(173,216,230,.18);
  display:flex;justify-content:space-around;align-items:center;
}
.g2fe-bottom-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:1.05rem;color:var(--g2fe-muted);gap:2px;height:100%;cursor:pointer;
  transition:color .15s ease;
}
.g2fe-bottom-nav a i{font-size:2.2rem}
.g2fe-bottom-nav a.active{color:var(--g2fe-secondary)}
.g2fe-bottom-nav a:active i{transform:scale(1.15);color:var(--g2fe-gold)}

/* Desktop */
@media (min-width:769px){
  body{max-width:768px;border-left:1px solid rgba(173,216,230,.08);border-right:1px solid rgba(173,216,230,.08)}
  .g2fe-bottom-nav{display:none}
}
/* Mobile padding so content not covered */
@media (max-width:768px){
  main.g2fe-main{padding-bottom:84px}
}