/* ===========================================================
   ace65.cyou - screen-5578d0.css
   Mobile-first gaming site (320-430px canvas).
   Prefix: pg55-
   Palette: #1A1A1A (bg) | #00FF7F (accent)
   =========================================================== */

:root{
  --pg55-bg:#0d0d0d;
  --pg55-bg-soft:#1A1A1A;
  --pg55-bg-card:#222222;
  --pg55-bg-card-2:#2a2a2a;
  --pg55-accent:#00FF7F;
  --pg55-accent-dark:#00cc66;
  --pg55-accent-soft:rgba(0,255,127,.14);
  --pg55-gold:#ffcf3a;
  --pg55-text:#f4f7f3;
  --pg55-text-dim:#a8b0a8;
  --pg55-text-muted:#7a847a;
  --pg55-border:rgba(0,255,127,.22);
  --pg55-border-soft:rgba(255,255,255,.08);
  --pg55-danger:#ff5d5d;
  --pg55-radius:14px;
  --pg55-radius-sm:10px;
  --pg55-header-h:60px;
  --pg55-bottom-h:66px;
  --pg55-shadow:0 8px 22px rgba(0,0,0,.45);
  --pg55-shadow-accent:0 6px 18px rgba(0,255,127,.28);
  --pg55-max-w:480px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
html{background:#000;}
body{
  font-family:"Hind Siliguri","Noto Sans Bengali","Segoe UI",system-ui,-apple-system,sans-serif;
  background:linear-gradient(180deg,#0a0a0a 0%,#111 60%,#0d0d0d 100%);
  color:var(--pg55-text);
  font-size:15px;
  line-height:1.65;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--pg55-accent);text-decoration:none;}
a:active{opacity:.85;}
img{max-width:100%;display:block;}

/* Centered mobile canvas on wider screens */
.pg55-shell{
  max-width:var(--pg55-max-w);
  margin:0 auto;
  background:var(--pg55-bg);
  min-height:100vh;
  position:relative;
  box-shadow:0 0 40px rgba(0,0,0,.6);
  padding-bottom:calc(var(--pg55-bottom-h) + 18px);
}

/* ============= Header ============= */
.pg55-header{
  position:sticky;
  top:0;
  z-index:60;
  height:var(--pg55-header-h);
  background:linear-gradient(90deg,#0f0f0f 0%,#1A1A1A 60%,#0f0f0f 100%);
  border-bottom:2px solid var(--pg55-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  gap:8px;
}
.pg55-brand{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  flex:1;
}
.pg55-brand-logo{
  width:38px;
  height:38px;
  border-radius:9px;
  object-fit:cover;
  border:2px solid var(--pg55-accent);
  box-shadow:var(--pg55-shadow-accent);
  background:#000;
  flex-shrink:0;
}
.pg55-brand-name{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  min-width:0;
}
.pg55-brand-name b{
  font-size:18px;
  color:var(--pg55-accent);
  letter-spacing:.5px;
  font-weight:800;
}
.pg55-brand-name small{
  font-size:10px;
  color:var(--pg55-text-muted);
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.pg55-head-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.pg55-btn{
  font-family:inherit;
  cursor:pointer;
  border:none;
  font-weight:700;
  border-radius:9px;
  padding:9px 14px;
  font-size:13px;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  transition:transform .15s ease,box-shadow .2s ease,background .2s;
}
.pg55-btn:active{transform:scale(.95);}
.pg55-btn-register{
  background:linear-gradient(135deg,var(--pg55-accent) 0%,var(--pg55-accent-dark) 100%);
  color:#04150c;
  box-shadow:var(--pg55-shadow-accent);
}
.pg55-btn-login{
  background:transparent;
  color:var(--pg55-accent);
  border:1.5px solid var(--pg55-accent);
}
.pg55-btn-ghost{
  background:transparent;
  color:var(--pg55-text);
  border:1.5px solid var(--pg55-border-soft);
}
.pg55-btn-block{
  width:100%;
  padding:13px;
  font-size:15px;
}
.pg55-menu-btn{
  width:38px;
  height:38px;
  border-radius:9px;
  background:var(--pg55-bg-card);
  border:1px solid var(--pg55-border-soft);
  color:var(--pg55-text);
  font-size:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* ============= Stacked overlay menu ============= */
.pg55-menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  z-index:70;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease;
}
.pg55-menu-overlay.pg55-open{
  opacity:1;
  visibility:visible;
}
.pg55-menu-panel{
  position:fixed;
  top:0;right:0;
  height:100%;
  width:84%;
  max-width:340px;
  background:linear-gradient(180deg,#161616 0%,#0d0d0d 100%);
  border-left:2px solid var(--pg55-border);
  z-index:80;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.5,.1,.3,1);
  overflow-y:auto;
  padding:18px 16px calc(var(--pg55-bottom-h) + 24px);
}
.pg55-menu-panel.pg55-open{transform:translateX(0);}
.pg55-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--pg55-border-soft);
}
.pg55-menu-head b{color:var(--pg55-accent);font-size:17px;}
.pg55-menu-close{
  background:var(--pg55-bg-card);
  border:none;
  color:var(--pg55-text);
  width:34px;height:34px;
  border-radius:8px;
  font-size:18px;
  cursor:pointer;
}
.pg55-menu-section{margin-bottom:16px;}
.pg55-menu-section h4{
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--pg55-text-muted);
  margin:0 0 8px 4px;
}
.pg55-menu-list{
  list-style:none;
  padding:0;margin:0;
  display:flex;flex-direction:column;gap:6px;
}
.pg55-menu-list a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius:10px;
  background:var(--pg55-bg-card);
  color:var(--pg55-text);
  font-size:14px;
  border:1px solid transparent;
  transition:background .2s,border-color .2s,padding-left .2s;
}
.pg55-menu-list a:hover,.pg55-menu-list a:active{
  background:var(--pg55-accent-soft);
  border-color:var(--pg55-border);
  padding-left:16px;
}
.pg55-menu-list a .pg55-ico{width:20px;text-align:center;color:var(--pg55-accent);}
.pg55-menu-cta{
  display:flex;
  gap:8px;
  margin-top:14px;
}
.pg55-menu-cta .pg55-btn{flex:1;}

/* ============= Hero / Carousel ============= */
.pg55-hero{
  position:relative;
  margin:12px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--pg55-shadow);
}
.pg55-slides{
  position:relative;
  height:190px;
}
.pg55-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .6s ease;
  cursor:pointer;
}
.pg55-slide.pg55-active{opacity:1;}
.pg55-slide img{
  width:100%;height:100%;
  object-fit:cover;
}
.pg55-slide-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.35) 65%,rgba(0,0,0,.05) 100%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px 16px;
}
.pg55-slide-title{
  font-size:20px;
  font-weight:800;
  color:#fff;
  margin:0 0 4px;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.pg55-slide-sub{
  font-size:12px;
  color:var(--pg55-accent);
  margin-bottom:10px;
  font-weight:600;
}
.pg55-slide-cta{
  display:inline-block;
  background:var(--pg55-accent);
  color:#04150c;
  font-weight:700;
  padding:7px 14px;
  border-radius:8px;
  font-size:12px;
  width:fit-content;
}
.pg55-dots{
  position:absolute;
  bottom:8px;
  right:12px;
  display:flex;gap:5px;
  z-index:5;
}
.pg55-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  cursor:pointer;
  transition:all .25s ease;
}
.pg55-dot.pg55-active{
  background:var(--pg55-accent);
  width:22px;
  border-radius:5px;
}

/* ============= Section title ============= */
.pg55-section{
  margin:22px 12px 6px;
}
.pg55-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid var(--pg55-border-soft);
}
.pg55-section-title{
  font-size:16px;
  font-weight:800;
  color:#fff;
  display:flex;align-items:center;gap:7px;
  margin:0;
}
.pg55-section-title::before{
  content:"";
  width:4px;height:18px;
  background:var(--pg55-accent);
  border-radius:3px;
  display:inline-block;
}
.pg55-section-title small{
  color:var(--pg55-text-muted);
  font-size:11px;
  font-weight:500;
  margin-left:6px;
}
.pg55-section-more{
  font-size:12px;
  color:var(--pg55-accent);
  font-weight:600;
}

/* ============= Game grid ============= */
.pg55-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.pg55-game{
  background:var(--pg55-bg-card);
  border:1px solid var(--pg55-border-soft);
  border-radius:11px;
  padding:6px;
  text-align:center;
  cursor:pointer;
  transition:transform .15s ease,border-color .2s,box-shadow .2s;
  overflow:hidden;
}
.pg55-game:active{
  transform:scale(.95);
  border-color:var(--pg55-accent);
  box-shadow:var(--pg55-shadow-accent);
}
.pg55-game-img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:8px;
  background:#000;
}
.pg55-game-name{
  margin-top:5px;
  font-size:10.5px;
  color:var(--pg55-text);
  font-weight:600;
  line-height:1.25;
  height:26px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.pg55-game-tag{
  display:inline-block;
  font-size:8.5px;
  background:var(--pg55-accent-soft);
  color:var(--pg55-accent);
  padding:1px 5px;
  border-radius:4px;
  margin-top:3px;
  font-weight:700;
}

/* ============= Category strip ============= */
.pg55-cat-strip{
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:4px 12px 8px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.pg55-cat-strip::-webkit-scrollbar{display:none;}
.pg55-cat{
  flex-shrink:0;
  background:var(--pg55-bg-card);
  border:1px solid var(--pg55-border-soft);
  padding:8px 14px;
  border-radius:20px;
  font-size:12px;
  color:var(--pg55-text-dim);
  font-weight:600;
  cursor:pointer;
  display:flex;align-items:center;gap:5px;
}
.pg55-cat.pg55-active{
  background:var(--pg55-accent);
  color:#04150c;
  border-color:var(--pg55-accent);
}

/* ============= Promo banner ============= */
.pg55-promo{
  margin:18px 12px;
  background:linear-gradient(135deg,#143d2a 0%,#0a1f16 100%);
  border:1px solid var(--pg55-border);
  border-radius:14px;
  padding:14px;
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  overflow:hidden;
}
.pg55-promo::after{
  content:"";
  position:absolute;
  right:-30px;top:-30px;
  width:120px;height:120px;
  background:radial-gradient(circle,rgba(0,255,127,.18),transparent 70%);
  pointer-events:none;
}
.pg55-promo-icon{
  font-size:30px;
  flex-shrink:0;
}
.pg55-promo-body{flex:1;min-width:0;}
.pg55-promo-title{
  font-size:15px;font-weight:800;color:#fff;margin:0 0 3px;
}
.pg55-promo-sub{
  font-size:11.5px;color:var(--pg55-text-dim);margin:0 0 8px;
}
.pg55-promo .pg55-btn{flex-shrink:0;padding:8px 14px;font-size:12px;}

/* ============= Info / feature blocks ============= */
.pg55-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.pg55-card{
  background:var(--pg55-bg-card);
  border:1px solid var(--pg55-border-soft);
  border-radius:12px;
  padding:13px;
}
.pg55-card-icon{
  width:38px;height:38px;
  border-radius:9px;
  background:var(--pg55-accent-soft);
  color:var(--pg55-accent);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;
  margin-bottom:8px;
}
.pg55-card h3{
  margin:0 0 5px;
  font-size:14px;
  color:#fff;
}
.pg55-card p{
  margin:0;
  font-size:12px;
  color:var(--pg55-text-dim);
  line-height:1.55;
}

/* ============= Tricks list ============= */
.pg55-tricks{
  list-style:none;
  padding:0;margin:0;
  display:flex;flex-direction:column;gap:9px;
}
.pg55-tricks li{
  display:flex;
  gap:10px;
  background:var(--pg55-bg-card);
  border:1px solid var(--pg55-border-soft);
  border-left:3px solid var(--pg55-accent);
  border-radius:10px;
  padding:11px 12px;
  font-size:13px;
  color:var(--pg55-text-dim);
}
.pg55-tricks li b{color:#fff;}
.pg55-trick-num{
  flex-shrink:0;
  width:24px;height:24px;
  border-radius:50%;
  background:var(--pg55-accent);
  color:#04150c;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  font-size:12px;
}

/* ============= Compare table ============= */
.pg55-table{
  width:100%;
  border-collapse:collapse;
  font-size:12.5px;
  background:var(--pg55-bg-card);
  border-radius:11px;
  overflow:hidden;
}
.pg55-table th,.pg55-table td{
  padding:10px 11px;
  text-align:left;
  border-bottom:1px solid var(--pg55-border-soft);
}
.pg55-table th{
  background:var(--pg55-accent-soft);
  color:var(--pg55-accent);
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.pg55-table tr:last-child td{border-bottom:none;}

/* ============= Concept box ============= */
.pg55-concept{
  background:linear-gradient(135deg,#143d2a 0%,#0a1f16 100%);
  border:1px solid var(--pg55-border);
  border-radius:12px;
  padding:14px;
  font-size:13px;
  color:var(--pg55-text-dim);
}
.pg55-concept b{color:var(--pg55-accent);}

/* ============= SEO text section ============= */
.pg55-seo{
  margin:18px 12px;
  background:var(--pg55-bg-card);
  border:1px solid var(--pg55-border-soft);
  border-radius:14px;
  padding:16px;
}
.pg55-seo h2{
  font-size:16px;
  color:#fff;
  margin:0 0 10px;
  font-weight:800;
}
.pg55-seo h2::before{
  content:"";
  display:inline-block;
  width:4px;height:16px;
  background:var(--pg55-accent);
  margin-right:7px;
  vertical-align:-2px;
  border-radius:3px;
}
.pg55-seo p{
  font-size:13px;
  color:var(--pg55-text-dim);
  margin:0 0 10px;
  line-height:1.7;
}
.pg55-seo p a{color:var(--pg55-accent);font-weight:600;}
.pg55-seo ul{margin:0 0 10px;padding-left:18px;}
.pg55-seo ul li{font-size:13px;color:var(--pg55-text-dim);margin-bottom:5px;}

/* ============= Extended footer ============= */
.pg55-ext-footer{
  margin:22px 12px 14px;
  background:linear-gradient(180deg,#161616 0%,#0d0d0d 100%);
  border:1px solid var(--pg55-border-soft);
  border-radius:14px;
  overflow:hidden;
}
.pg55-ext-block{
  padding:14px;
  border-bottom:1px solid var(--pg55-border-soft);
}
.pg55-ext-block:last-child{border-bottom:none;}
.pg55-ext-block h3{
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--pg55-accent);
  margin:0 0 10px;
  font-weight:800;
}
.pg55-ext-brand{
  display:flex;align-items:center;gap:10px;margin-bottom:8px;
}
.pg55-ext-brand img{
  width:34px;height:34px;border-radius:8px;border:1.5px solid var(--pg55-accent);
}
.pg55-ext-brand b{color:#fff;font-size:16px;}
.pg55-ext-block p{
  font-size:12.5px;color:var(--pg55-text-dim);margin:0;line-height:1.6;
}
.pg55-ext-promos{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.pg55-ext-promo{
  background:var(--pg55-bg-card);
  border:1px solid var(--pg55-border-soft);
  border-radius:10px;
  padding:10px;
  font-size:11.5px;
  color:var(--pg55-text);
  cursor:pointer;
  transition:background .2s,border-color .2s;
}
.pg55-ext-promo:active{
  background:var(--pg55-accent-soft);
  border-color:var(--pg55-accent);
}
.pg55-ext-promo b{display:block;color:var(--pg55-accent);font-size:12.5px;margin-bottom:3px;}
.pg55-ext-promo small{color:var(--pg55-text-muted);font-size:10px;}

.pg55-directory{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
}
.pg55-directory a{
  font-size:12px;
  color:var(--pg55-text-dim);
  padding:7px 9px;
  background:var(--pg55-bg-card);
  border-radius:8px;
  border-left:2px solid var(--pg55-accent);
  display:block;
  transition:color .2s,background .2s;
}
.pg55-directory a:active{color:var(--pg55-accent);}

.pg55-disclaimer{
  font-size:11px;
  color:var(--pg55-text-muted);
  line-height:1.6;
  padding:12px 14px;
  background:#0a0a0a;
}

/* ============= Footer (common) ============= */
.pg55-footer{
  text-align:center;
  padding:14px 12px calc(var(--pg55-bottom-h) + 14px);
  font-size:11px;
  color:var(--pg55-text-muted);
  border-top:1px solid var(--pg55-border-soft);
  margin-top:8px;
}
.pg55-footer b{color:var(--pg55-accent);}

/* ============= Bottom nav ============= */
.pg55-bottom{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:100%;
  max-width:var(--pg55-max-w);
  height:var(--pg55-bottom-h);
  background:linear-gradient(180deg,#161616 0%,#0a0a0a 100%);
  border-top:2px solid var(--pg55-border);
  display:flex;
  align-items:stretch;
  z-index:90;
  box-shadow:0 -4px 18px rgba(0,0,0,.55);
}
.pg55-bottom::before{
  content:"";
  position:absolute;
  top:-2px;
  left:50%;
  transform:translateX(-50%);
  width:60%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--pg55-accent),transparent);
  opacity:.6;
}
.pg55-nav-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  background:transparent;
  border:none;
  color:var(--pg55-text-muted);
  font-size:10px;
  font-family:inherit;
  font-weight:600;
  cursor:pointer;
  padding:6px 2px;
  position:relative;
  transition:color .2s;
}
.pg55-nav-item .pg55-nav-ico{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  color:var(--pg55-text-muted);
  transition:transform .2s,color .2s;
}
.pg55-nav-item .pg55-nav-ico svg{width:22px;height:22px;}
.pg55-nav-item.pg55-active{color:var(--pg55-accent);}
.pg55-nav-item.pg55-active .pg55-nav-ico{
  color:var(--pg55-accent);
  transform:translateY(-2px);
}
.pg55-nav-item.pg55-active::after{
  content:"";
  position:absolute;
  top:0;
  width:30px;
  height:3px;
  background:var(--pg55-accent);
  border-radius:0 0 4px 4px;
  box-shadow:0 0 8px var(--pg55-accent);
}
.pg55-nav-item:active .pg55-nav-ico{transform:scale(.88);}
.pg55-nav-item .pg55-nav-label{
  font-size:9.5px;
  letter-spacing:.2px;
}

/* Indicator slider micro-interaction dot */
.pg55-nav-item.pg55-active .pg55-nav-label::before{
  content:"";
  display:inline-block;
  width:4px;height:4px;
  background:var(--pg55-accent);
  border-radius:50%;
  margin-right:3px;
  vertical-align:1px;
}

/* ============= Utility ============= */
.pg55-container{padding:0 12px;}
.pg55-row{display:flex;gap:10px;align-items:center;}
.pg55-spacer{height:14px;}
.pg55-pill{
  display:inline-block;
  padding:3px 10px;
  font-size:11px;
  border-radius:14px;
  background:var(--pg55-accent-soft);
  color:var(--pg55-accent);
  font-weight:700;
}

@media (min-width:431px){
  body{background:#000;}
}
@media (max-width:359px){
  .pg55-grid{grid-template-columns:repeat(3,1fr);}
  .pg55-ext-promos,.pg55-directory{grid-template-columns:1fr;}
}