@charset "UTF-8";
/*!
 * F168B4 - style-3a8d.css
 * Mobile-first responsive stylesheet. All custom classes use the `g8d0-` prefix.
 * Palette: turquoise #40E0D0 / orchid #BA55D3 / lilac #CC99FF / dark slate #273746 / pink #FFC0CB.
 */
:root{
  --g8d0-bg:#0d141c;
  --g8d0-bg2:#101b27;
  --g8d0-card:#16242f;
  --g8d0-card2:#1d3040;
  --g8d0-primary:#40E0D0;
  --g8d0-secondary:#BA55D3;
  --g8d0-lilac:#CC99FF;
  --g8d0-pink:#FFC0CB;
  --g8d0-dark:#273746;
  --g8d0-text:#eaf6f4;
  --g8d0-muted:#9fb3bd;
  --g8d0-border:rgba(64,224,208,.22);
  --g8d0-grad:linear-gradient(135deg,#BA55D3 0%,#40E0D0 100%);
  --g8d0-grad2:linear-gradient(135deg,#CC99FF 0%,#FFC0CB 100%);
  --g8d0-shadow:0 8px 24px rgba(0,0,0,.35);
  --g8d0-radius:14px;
}
*{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,"Noto Sans",sans-serif;
  background:var(--g8d0-bg);
  color:var(--g8d0-text);
  line-height:1.6;
  font-size:1.6rem;
  overflow-x:hidden;
}
img{max-width:100%;display:block;border:0}
a{color:var(--g8d0-primary);text-decoration:none}
a:hover{color:var(--g8d0-lilac)}
ul,ol{list-style:none}
.g8d0-container{width:100%;max-width:1200px;margin:0 auto;padding:0 14px}
.g8d0-no-scroll{overflow:hidden}
.g8d0-hidden{display:none!important}

/* ===== Header ===== */
.g8d0-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(90deg,rgba(13,20,28,.92),rgba(16,27,39,.92));
  border-bottom:1px solid var(--g8d0-border);
  backdrop-filter:blur(10px);
  transition:box-shadow .25s ease,background .25s ease;
}
.g8d0-header-scrolled{box-shadow:0 6px 18px rgba(0,0,0,.45)}
.g8d0-header-inner{display:flex;align-items:center;justify-content:space-between;height:60px;gap:10px}
.g8d0-logo{display:flex;align-items:center;gap:8px;font-size:2rem;font-weight:800;color:#fff;letter-spacing:.5px}
.g8d0-logo .g8d0-logo-mark{
  width:34px;height:34px;border-radius:9px;background:var(--g8d0-grad);
  display:flex;align-items:center;justify-content:center;color:#0d141c;font-weight:800;font-size:1.4rem
}
.g8d0-logo span{background:var(--g8d0-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.g8d0-header-actions{display:flex;align-items:center;gap:8px}
.g8d0-menu-btn{
  background:transparent;border:1px solid var(--g8d0-border);color:var(--g8d0-text);
  width:40px;height:40px;border-radius:10px;font-size:1.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center
}
.g8d0-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border:0;border-radius:22px;font-size:1.35rem;font-weight:700;
  cursor:pointer;text-decoration:none;line-height:1;min-height:40px;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.g8d0-btn:active{transform:scale(.96)}
.g8d0-btn-register{background:var(--g8d0-grad);color:#0d141c;box-shadow:0 4px 14px rgba(64,224,208,.4)}
.g8d0-btn-register:hover{filter:brightness(1.08);color:#0d141c}
.g8d0-btn-login{background:transparent;color:var(--g8d0-text);border:1px solid var(--g8d0-primary)}
.g8d0-btn-login:hover{background:rgba(64,224,208,.12);color:var(--g8d0-primary)}
.g8d0-btn-block{display:flex;width:100%;padding:14px;font-size:1.5rem}
.g8d0-btn-ghost{background:rgba(186,85,211,.16);color:var(--g8d0-lilac);border:1px solid rgba(186,85,211,.4)}

/* ===== Mobile menu (slide-in) ===== */
.g8d0-menu-mask{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998;opacity:0;visibility:hidden;transition:opacity .25s ease}
.g8d0-mask-show{opacity:1;visibility:visible}
.g8d0-mobile-menu{
  position:fixed;top:0;right:-86%;width:80%;max-width:330px;height:100vh;
  background:linear-gradient(160deg,#101b27,#16242f);z-index:9999;
  transform:translateX(0);transition:right .3s ease;padding:22px 18px;overflow-y:auto;border-left:1px solid var(--g8d0-border)
}
.g8d0-menu-open{right:0!important}
.g8d0-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.g8d0-menu-close{background:transparent;border:0;color:var(--g8d0-text);font-size:2.2rem;cursor:pointer}
.g8d0-menu-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.g8d0-menu-nav h4{font-size:1.3rem;color:var(--g8d0-muted);text-transform:uppercase;letter-spacing:1px;margin:14px 0 8px}
.g8d0-menu-nav a{display:block;padding:11px 12px;border-radius:10px;color:var(--g8d0-text);font-size:1.5rem;border:1px solid transparent}
.g8d0-menu-nav a:hover{background:rgba(64,224,208,.1);border-color:var(--g8d0-border);color:var(--g8d0-primary)}

/* ===== Hero carousel ===== */
.g8d0-hero{margin-top:60px;position:relative;overflow:hidden}
.g8d0-hero-viewport{overflow:hidden;border-radius:0}
.g8d0-hero-track{display:flex;transition:transform .5s ease;width:100%}
.g8d0-hero-slide{
  min-width:100%;padding:32px 16px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  background:linear-gradient(135deg,rgba(186,85,211,.32),rgba(64,224,208,.28));position:relative
}
.g8d0-hero-slide:nth-child(even){background:linear-gradient(135deg,rgba(204,153,255,.3),rgba(255,192,203,.28))}
.g8d0-hero-tag{font-size:1.25rem;font-weight:700;color:var(--g8d0-pink);background:rgba(0,0,0,.28);padding:5px 12px;border-radius:20px}
.g8d0-hero h1{font-size:2.7rem;line-height:1.25;color:#fff;font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.g8d0-hero p{color:#eef6f5;font-size:1.5rem;max-width:560px}
.g8d0-hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.g8d0-hero-dots{display:flex;gap:8px;justify-content:center;padding:10px 0 4px}
.g8d0-hero-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;border:0}
.g8d0-dot-active{background:var(--g8d0-primary);width:24px;border-radius:6px}

/* ===== Sections / titles ===== */
.g8d0-section{padding:28px 0}
.g8d0-section-alt{background:var(--g8d0-bg2)}
.g8d0-section-title{font-size:2.2rem;font-weight:800;margin-bottom:6px;color:#fff}
.g8d0-section-title em{font-style:normal;background:var(--g8d0-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.g8d0-section-sub{color:var(--g8d0-muted);font-size:1.4rem;margin-bottom:18px}
.g8d0-title-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.g8d0-title-bar i{color:var(--g8d0-primary);font-size:1.8rem}

/* ===== Promo / feature highlights ===== */
.g8d0-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}
.g8d0-feature{
  background:var(--g8d0-card);border:1px solid var(--g8d0-border);border-radius:var(--g8d0-radius);
  padding:16px;text-align:center;transition:transform .2s ease,border-color .2s ease
}
.g8d0-feature:hover{transform:translateY(-4px);border-color:var(--g8d0-primary)}
.g8d0-feature .g8d0-feature-ico{
  width:48px;height:48px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;
  background:rgba(64,224,208,.14);color:var(--g8d0-primary);font-size:2.2rem
}
.g8d0-feature h3{font-size:1.5rem;color:#fff;margin-bottom:4px}
.g8d0-feature p{color:var(--g8d0-muted);font-size:1.3rem;line-height:1.45}

/* ===== Category tabs ===== */
.g8d0-cat-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.g8d0-cat-tabs::-webkit-scrollbar{display:none}
.g8d0-cat-tab{
  flex:0 0 auto;padding:9px 16px;border-radius:20px;background:var(--g8d0-card);
  border:1px solid var(--g8d0-border);color:var(--g8d0-text);font-size:1.35rem;font-weight:600;cursor:pointer;white-space:nowrap
}
.g8d0-cat-tab-active{background:var(--g8d0-grad);color:#0d141c;border-color:transparent}

/* ===== Game grid ===== */
.g8d0-game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.g8d0-game-card{
  background:var(--g8d0-card);border:1px solid var(--g8d0-border);border-radius:var(--g8d0-radius);
  overflow:hidden;position:relative;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
.g8d0-game-card:hover{transform:translateY(-4px);box-shadow:var(--g8d0-shadow);border-color:var(--g8d0-primary)}
.g8d0-game-thumb{position:relative;aspect-ratio:1/1;background:#0d141c;overflow:hidden}
.g8d0-game-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.g8d0-game-card:hover .g8d0-game-thumb img{transform:scale(1.06)}
.g8d0-game-overlay{
  position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,20,28,0) 40%,rgba(13,20,28,.88) 100%);
  display:flex;align-items:flex-end;justify-content:center;padding:10px;opacity:0;transition:opacity .25s ease
}
.g8d0-game-card:hover .g8d0-game-overlay{opacity:1}
.g8d0-game-play{
  background:var(--g8d0-grad);color:#0d141c;font-weight:700;font-size:1.25rem;padding:7px 16px;border-radius:18px;
  border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px
}
.g8d0-game-badge{position:absolute;top:6px;left:6px;background:rgba(186,85,211,.9);color:#fff;font-size:1.05rem;font-weight:700;padding:3px 9px;border-radius:12px;z-index:2}
.g8d0-game-badge.hot{background:linear-gradient(90deg,#FFC0CB,#BA55D3)}
.g8d0-game-name{padding:8px 8px 10px;font-size:1.25rem;color:var(--g8d0-text);font-weight:600;text-align:center;line-height:1.3;min-height:42px;display:flex;align-items:center;justify-content:center}
.g8d0-game-cat-label{display:block;text-align:center;color:var(--g8d0-muted);font-size:1.1rem;margin:-4px 0 8px;text-transform:uppercase;letter-spacing:1px}

/* ===== Featured banner ===== */
.g8d0-cta-banner{
  background:var(--g8d0-grad);border-radius:18px;padding:22px;color:#0d141c;text-align:center;margin:24px 0;
  box-shadow:0 10px 26px rgba(64,224,208,.32)
}
.g8d0-cta-banner h3{font-size:2rem;font-weight:800;margin-bottom:6px}
.g8d0-cta-banner p{font-size:1.4rem;margin-bottom:12px;color:#0d141c}
.g8d0-cta-banner .g8d0-btn{background:#0d141c;color:#fff}

/* ===== Long-form SEO article ===== */
.g8d0-article{background:var(--g8d0-card);border:1px solid var(--g8d0-border);border-radius:var(--g8d0-radius);padding:22px 18px}
.g8d0-article h2{font-size:2rem;color:#fff;margin:18px 0 8px;font-weight:800}
.g8d0-article h2:first-child{margin-top:0}
.g8d0-article h3{font-size:1.6rem;color:var(--g8d0-primary);margin:14px 0 6px}
.g8d0-article p{color:#d6e6e3;margin-bottom:10px;font-size:1.45rem;line-height:1.7}
.g8d0-article a{color:var(--g8d0-lilac);text-decoration:underline}
.g8d0-article ul{margin:6px 0 14px 4px}
.g8d0-article ul li{position:relative;padding-left:22px;margin-bottom:6px;color:#d6e6e3;font-size:1.4rem}
.g8d0-article ul li:before{content:"▸";color:var(--g8d0-primary);position:absolute;left:0;top:0}
.g8d0-article .g8d0-callout{background:rgba(186,85,211,.14);border-left:4px solid var(--g8d0-secondary);padding:12px 14px;border-radius:8px;margin:14px 0;color:#f1e6f6;font-size:1.4rem}

/* ===== FAQ ===== */
.g8d0-faq-item{background:var(--g8d0-card);border:1px solid var(--g8d0-border);border-radius:12px;margin-bottom:10px;overflow:hidden}
.g8d0-faq-q{width:100%;background:transparent;border:0;color:#fff;padding:14px 16px;font-size:1.45rem;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:600}
.g8d0-faq-q .g8d0-faq-icon{color:var(--g8d0-primary);font-size:1.6rem;transition:transform .25s ease}
.g8d0-faq-open .g8d0-faq-icon{transform:rotate(45deg)}
.g8d0-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 16px;color:var(--g8d0-muted);font-size:1.4rem;line-height:1.6}
.g8d0-faq-open .g8d0-faq-a{max-height:600px;padding:0 16px 14px}

/* ===== Footer ===== */
.g8d0-footer{background:#0a0f15;border-top:1px solid var(--g8d0-border);padding:30px 0 90px;margin-top:24px}
.g8d0-footer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:20px}
.g8d0-footer h4{color:#fff;font-size:1.45rem;margin-bottom:10px;font-weight:700}
.g8d0-footer a{display:block;color:var(--g8d0-muted);font-size:1.3rem;padding:4px 0}
.g8d0-footer a:hover{color:var(--g8d0-primary)}
.g8d0-footer p{color:var(--g8d0-muted);font-size:1.3rem;line-height:1.6}
.g8d0-footer-bottom{border-top:1px solid var(--g8d0-border);padding-top:16px;text-align:center;color:var(--g8d0-muted);font-size:1.25rem}

/* ===== Bottom nav ===== */
.g8d0-bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;height:62px;
  background:rgba(10,15,21,.97);border-top:1px solid var(--g8d0-border);
  display:flex;justify-content:space-around;align-items:stretch;backdrop-filter:blur(10px)
}
.g8d0-bottom-nav button,.g8d0-bottom-nav a{
  flex:1;min-width:60px;min-height:60px;background:transparent;border:0;color:var(--g8d0-muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:1.05rem;cursor:pointer;text-decoration:none;padding:4px 2px;transition:color .2s ease
}
.g8d0-bottom-nav button i,.g8d0-bottom-nav a i{font-size:2.2rem}
.g8d0-bottom-nav button:hover,.g8d0-bottom-nav a:hover{color:var(--g8d0-primary)}
.g8d0-bottom-nav .g8d0-nav-active{color:var(--g8d0-primary)}
.g8d0-bottom-nav .g8d0-nav-center{
  background:var(--g8d0-grad);color:#0d141c;border-radius:50%;width:50px;height:50px;margin-top:-22px;
  box-shadow:0 6px 14px rgba(64,224,208,.4);flex:0 0 auto;align-self:center
}
.g8d0-bottom-nav .g8d0-nav-center i{font-size:2.4rem}

/* ===== Back-to-top ===== */
.g8d0-top-btn{
  position:fixed;right:14px;bottom:74px;z-index:999;width:44px;height:44px;border-radius:50%;
  background:var(--g8d0-secondary);color:#fff;border:0;font-size:1.8rem;cursor:pointer;
  opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease;box-shadow:var(--g8d0-shadow)
}
.g8d0-top-show{opacity:1;visibility:visible}
.g8d0-top-btn:hover{transform:translateY(-3px)}

/* ===== Misc ===== */
.g8d0-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px}
.g8d0-chip{background:rgba(64,224,208,.12);border:1px solid var(--g8d0-border);color:var(--g8d0-primary);font-size:1.2rem;padding:4px 10px;border-radius:14px}

/* ===== Desktop / tablet ===== */
@media (min-width:431px){
  .g8d0-hero h1{font-size:3.4rem}
  .g8d0-game-grid{grid-template-columns:repeat(4,1fr)}
  .g8d0-feature-grid{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:769px){
  body{font-size:1.65rem}
  .g8d0-menu-btn,.g8d0-mobile-menu,.g8d0-menu-mask{display:none!important}
  .g8d0-hero-slide{padding:54px 30px}
  .g8d0-hero h1{font-size:4rem}
  .g8d0-game-grid{grid-template-columns:repeat(6,1fr)}
  .g8d0-footer-grid{grid-template-columns:repeat(5,1fr)}
  .g8d0-footer{padding-bottom:30px}
  .g8d0-bottom-nav{display:none!important}
  main{padding-bottom:30px!important}
  .g8d0-top-btn{bottom:24px}
}
/* Mobile main padding clearance for bottom nav */
@media (max-width:768px){
  main{padding-bottom:82px}
}

/* === Mobile fine-tune: small phones <= 430px === */
@media (max-width: 430px) {
  html { font-size: 14px; -webkit-text-size-adjust: 100%; }
  body { font-size: 14px; line-height: 1.5; overflow-x: hidden; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.05rem; }
  img { max-width: 100%; height: auto; }
  .g8d0hero-title { font-size: 1.6rem !important; }
  .g8d0game-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .g8d0card { padding: 6px !important; }
  .g8d0section { padding: 12px 10px !important; }
  .g8d0bottom-nav { height: 56px !important; }
  .g8d0bottom-nav a { font-size: 10px !important; }
}