/* =========================================================
   GREEN THEME OVERRIDE
   Based on the uploaded  stylesheet structure.
   No external library required.
   ========================================================= */

:root{
  --efek88-bg:#050b08;
  --efek88-bg-soft:#08120d;
  --efek88-panel:#0d1a12;
  --efek88-panel-2:#102219;

  --efek88-green-dark:#08783d;
  --efek88-green:#18c968;
  --efek88-green-light:#49f08d;

  --efek88-white:#f4fff8;
  --efek88-muted:#91a69a;
  --efek88-border:rgba(24,201,104,.38);

  --efek88-shadow:0 8px 22px rgba(0,0,0,.38);
  --efek88-cut-sm:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  --efek88-cut-md:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
  --efek88-shape:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  .category-item {
    clip-path: polygon(
        50% 0,
        92% 18%,
        100% 55%,
        78% 84%,
        50% 100%,
        22% 84%,
        0 55%,
        8% 18%
    );
}
}

html{
  overflow-x:hidden;
  background:var(--efek88-bg);
  scrollbar-color:var(--efek88-green) var(--efek88-bg-soft);
}

body{
  min-width:320px;
  overflow-x:hidden;
  padding-bottom:calc(78px + env(safe-area-inset-bottom));
  color:var(--efek88-white);
  background:
    radial-gradient(circle at 15% 5%,rgba(24,201,104,.09),transparent 26rem),
    radial-gradient(circle at 90% 35%,rgba(73,240,141,.045),transparent 24rem),
    linear-gradient(180deg,#0a1710 0%,#050b08 55%,#07110b 100%) !important;
}

/* Fixed-header clearance */
#content{width:100%;margin-top:72px !important}
#maincontent{position:relative;z-index:1;width:100%;overflow:hidden}

a{color:var(--efek88-green-light)}
a:hover{color:#8affb5}

/* =========================================================
   HEADER
   ========================================================= */
#navbar-top-wrapper.fixed-top{z-index:1090}

#navbar-top{
  position:relative;
  isolation:isolate;
  min-height:64px;
  padding:4px 0 !important;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% -90%,rgba(38,218,116,.20),transparent 68%),
    linear-gradient(180deg,#0c2a19 0%,#08170f 58%,#050c08 100%) !important;
  border-top:1px solid rgba(73,240,141,.20);
  border-bottom:2px solid var(--efek88-green);
  box-shadow:0 5px 18px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.05);
}

#navbar-top::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(24,201,104,.06),transparent);
}

#navbar-top>.container{
  position:relative;
  z-index:2;
  display:grid !important;
  grid-template-columns:52px minmax(0,1fr) 52px;
  align-items:center;
  width:100%;
}

#sidebarCollapse{
  position:relative;
  display:grid !important;
  place-items:center;
  width:48px;
  height:44px;
  padding:0 !important;
  color:var(--efek88-green-light) !important;
  background:linear-gradient(135deg,var(--efek88-green-light),var(--efek88-green),var(--efek88-green-dark)) !important;
  border:0 !important;
  border-radius:0 !important;
  clip-path:var(--efek88-shape);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));
  transition:transform .18s ease;
}
#sidebarCollapse::before{
  content:"";
  position:absolute;
  inset:3px;
  background:linear-gradient(145deg,#155d37,#0a2b19 55%,#06140c);
  clip-path:inherit;
}
#sidebarCollapse .bi{
  position:relative;
  z-index:2;
  color:var(--efek88-green-light);
  font-size:1.4rem !important;
}
#sidebarCollapse:active{transform:scale(.93)}

#navbar-top .flex-fill.text-center{
  position:relative;
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  height:54px;
  min-width:0;
}

#navbar-top .flex-fill.text-center::before,
#navbar-top .flex-fill.text-center::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  clip-path:polygon(9% 0,91% 0,100% 50%,91% 100%,9% 100%,0 50%);
}

#navbar-top .flex-fill.text-center::before{
  z-index:0;
  width:min(320px,100%);
  height:50px;
  background:linear-gradient(135deg,#0b6d37,var(--efek88-green),var(--efek88-green-light),var(--efek88-green),#0b6d37);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.45));
}
#navbar-top .flex-fill.text-center::after{
  z-index:1;
  width:min(314px,calc(100% - 6px));
  height:44px;
  background:linear-gradient(180deg,#145d37,#092719 58%,#06150c);
  box-shadow:inset 0 0 13px rgba(255,255,255,.05);
}
#navbar-top .flex-fill.text-center>a{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}
#navbar-imglogo{
  position:relative;
  z-index:4;
  width:auto;
  height:auto;
  max-width:min(220px,calc(100% - 40px)) !important;
  max-height:42px !important;
  object-fit:contain;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.75));
}

/* =========================================================
   CATEGORY MENU
   ========================================================= */
nav.menubar:not(.fixed-bottom){
  position:relative !important;
  isolation:isolate;
  z-index:3;
  width:100%;
  margin:0 !important;
  padding:7px 0 6px !important;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% -80%,rgba(24,201,104,.15),transparent 72%),
    linear-gradient(180deg,#0c2517,#06120b) !important;
  border-top:1px solid rgba(73,240,141,.16);
  border-bottom:2px solid var(--efek88-green);
  box-shadow:0 6px 18px rgba(0,0,0,.40);
}

#category-navbar .item a,
#category-navbar-desktop>.flex-grow-1>a{
  position:relative;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  color:var(--efek88-white) !important;
}

#category-navbar .item a{min-height:58px;padding:5px 2px 1px}
#category-navbar-desktop>.flex-grow-1>a{min-height:75px;padding:7px 2px 2px}

#category-navbar .item a::before,
#category-navbar .item a::after,
#category-navbar-desktop>.flex-grow-1>a::before,
#category-navbar-desktop>.flex-grow-1>a::after{
  content:"";
  position:absolute;
  left:50%;
  clip-path:var(--efek88-shape);
  transform:translateX(-50%);
}

#category-navbar .item a::before{
  top:0;width:47px;height:42px;
  background:linear-gradient(135deg,#49f08d,var(--efek88-green),var(--efek88-green-dark));
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));
}
#category-navbar .item a::after{
  top:3px;width:41px;height:36px;
  background:linear-gradient(145deg,#177441,#0b3a22 50%,#061b10);
}

#category-navbar-desktop>.flex-grow-1>a::before{
  top:1px;width:61px;height:55px;
  background:linear-gradient(135deg,#49f08d,var(--efek88-green),var(--efek88-green-dark));
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.50));
}
#category-navbar-desktop>.flex-grow-1>a::after{
  top:4px;width:55px;height:49px;
  background:linear-gradient(145deg,#177441,#0b3a22 50%,#061b10);
}

#category-navbar .item img{
  position:relative;z-index:2;
  display:block !important;
  width:31px !important;height:31px !important;
  object-fit:contain;
}
#category-navbar-desktop img{
  position:relative;z-index:2;
  width:42px;height:42px;
  object-fit:contain;
}
#category-navbar .item a>div,
#category-navbar-desktop a>div{
  position:relative;z-index:2;
  color:var(--efek88-white);
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  text-shadow:0 1px 3px #000;
}
#category-navbar .item a>div{margin-top:7px;font-size:.58rem !important}
#category-navbar-desktop a>div{margin-top:8px;font-size:.59rem !important}

/* =========================================================
   SIDEBAR
   ========================================================= */
#sidebar.bg-dark{
  overflow-x:hidden !important;
  opacity:1 !important;
  color:var(--efek88-white);
  background:
    radial-gradient(circle at 20% 5%,rgba(24,201,104,.18),transparent 18rem),
    linear-gradient(180deg,#0d2b1a,#06150c 65%,#030906) !important;
  border-right:2px solid var(--efek88-green);
  box-shadow:12px 0 32px rgba(0,0,0,.50);
}
#sidebar .nav-link{
  position:relative;
  margin:3px 0;
  padding:12px 14px !important;
  color:var(--efek88-white) !important;
  background:linear-gradient(90deg,rgba(24,201,104,.15),rgba(6,18,11,.10));
  border:1px solid rgba(24,201,104,.16);
  border-radius:0 !important;
  clip-path:var(--efek88-cut-sm);
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
#sidebar .nav-link i{color:var(--efek88-green-light)}
#sidebar .nav-link:hover,
#sidebar .nav-link:focus-visible{
  transform:translateX(3px);
  background:linear-gradient(90deg,rgba(24,201,104,.30),rgba(10,28,17,.28));
  border-color:var(--efek88-green);
}
.overlay{background:rgba(0,0,0,.72) !important}

/* =========================================================
   BANNER / SLIDER
   ========================================================= */
#main-slider,
#carousel-exlusive-promotion{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--efek88-green-dark),var(--efek88-green-light),var(--efek88-green-dark));
  box-shadow:var(--efek88-shadow);
}
#main-slider{padding:2px 0;border-top:1px solid var(--efek88-green-light);border-bottom:1px solid var(--efek88-green)}
#carousel-exlusive-promotion{padding:2px;clip-path:var(--efek88-cut-md)}
#main-slider .carousel-item img,
#carousel-exlusive-promotion .carousel-item img{
  display:block;
  object-fit:cover;
  background:var(--efek88-panel);
}
#carousel-exlusive-promotion .carousel-item img{clip-path:var(--efek88-cut-md)}
#main-slider .carousel-indicators button{
  width:9px;height:9px;margin:0 4px;
  background-color:var(--efek88-green-light) !important;
  border:1px solid #062414;
  border-radius:0;
  clip-path:var(--efek88-shape);
  opacity:.45;
}
#main-slider .carousel-indicators button.active{
  opacity:1;
  filter:drop-shadow(0 0 5px var(--efek88-green));
}

/* =========================================================
   HEADINGS
   ========================================================= */
#maincontent h3{
  color:var(--efek88-white);
  font-weight:700;
  letter-spacing:.25px;
  text-shadow:0 2px 4px rgba(0,0,0,.60);
}
#maincontent .d-flex.justify-content-between.align-items-center{
  position:relative;
  min-height:46px;
  margin-top:20px !important;
  padding:6px 12px;
  background:linear-gradient(90deg,rgba(12,82,43,.72),rgba(5,20,12,.42),transparent);
  border-left:3px solid var(--efek88-green);
  border-bottom:1px solid rgba(24,201,104,.30);
  clip-path:var(--efek88-cut-sm);
}
#maincontent .d-flex.justify-content-between.align-items-center h3{
  margin:0 !important;
  font-size:clamp(1.05rem,3.5vw,1.55rem);
}
#maincontent .d-flex.justify-content-between.align-items-center>a{
  color:var(--efek88-green-light);
  font-size:clamp(.7rem,2.5vw,.95rem);
}

/* =========================================================
   LOGIN / FORM / BUTTONS
   ========================================================= */
#row-quicklogin.card{
  overflow:hidden;
  color:var(--efek88-white);
  background:linear-gradient(145deg,rgba(12,65,34,.94),rgba(3,13,8,.97)) !important;
  border:1px solid var(--efek88-green) !important;
  border-radius:0 !important;
  clip-path:var(--efek88-cut-md);
  box-shadow:var(--efek88-shadow),inset 0 1px rgba(255,255,255,.05);
}
#row-quicklogin .form-label{color:var(--efek88-green-light)}

.form-control,.input-group .form-control{
  min-height:44px;
  color:var(--efek88-white) !important;
  caret-color:var(--efek88-green-light);
  background:rgba(3,12,7,.78) !important;
  border:1px solid rgba(24,201,104,.48) !important;
  border-radius:0 !important;
  clip-path:var(--efek88-cut-sm);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.35) !important;
}
.form-control::placeholder{color:#9eb1a5 !important}
.form-control:focus{
  border-color:var(--efek88-green-light) !important;
  box-shadow:0 0 0 2px rgba(24,201,104,.12),0 0 10px rgba(24,201,104,.20) !important;
}
.btn{
  min-height:42px;
  font-weight:700;
  letter-spacing:.35px;
  border-radius:0 !important;
  clip-path:var(--efek88-cut-sm);
  box-shadow:0 5px 12px rgba(0,0,0,.25);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.btn-primary,#btn-login{
  color:#fff !important;
  background:linear-gradient(135deg,#38e47f,#119b50 52%,#075b30) !important;
  border:1px solid var(--efek88-green-light) !important;
}
.btn-secondary,#btn-register{
  color:#031109 !important;
  background:linear-gradient(135deg,#8affb5,var(--efek88-green) 54%,#0b8f48) !important;
  border:1px solid #a8ffc7 !important;
}
.btn-danger,#btn-promotion{
  color:#fff !important;
  background:linear-gradient(135deg,#238b54,#10522f 56%,#082718) !important;
  border:1px solid var(--efek88-green) !important;
}
.btn:active{transform:translateY(1px) scale(.98)}

/* =========================================================
   GAME GRID
   ========================================================= */
#maincontent .row.mb-3.g-1>[class*="col-"]>a,
#maincontent .row:has(> .col-6.col-md-4.col-lg-3.col-xl-2 img)>[class*="col-"]>a{
  position:relative;
  display:block;
  width:100%;
  padding:2px;
  overflow:hidden;
  background:linear-gradient(135deg,#8affb5,var(--efek88-green) 35%,#08783d 65%,#43e98a);
  clip-path:var(--efek88-cut-sm);
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.38));
  transition:transform .20s ease,filter .20s ease;
}
#maincontent .row.mb-3.g-1>[class*="col-"]>a::after,
#maincontent .row:has(> .col-6.col-md-4.col-lg-3.col-xl-2 img)>[class*="col-"]>a::after{
  content:"";
  position:absolute;
  inset:3px;
  z-index:2;
  pointer-events:none;
  border:1px solid rgba(160,255,196,.28);
  clip-path:var(--efek88-cut-sm);
}
#maincontent .row.mb-3.g-1>[class*="col-"]>a img,
#maincontent .row:has(> .col-6.col-md-4.col-lg-3.col-xl-2 img)>[class*="col-"]>a>img{
  display:block;
  width:100% !important;
  height:auto !important;
  aspect-ratio:4/3;
  object-fit:cover;
  background:var(--efek88-panel);
  clip-path:var(--efek88-cut-sm);
  transition:transform .22s ease,filter .22s ease;
}

@media (hover:hover) and (pointer:fine){
  #maincontent .row.mb-3.g-1>[class*="col-"]>a:hover,
  #maincontent .row:has(> .col-6.col-md-4.col-lg-3.col-xl-2 img)>[class*="col-"]>a:hover{
    z-index:3;
    filter:
      drop-shadow(0 8px 11px rgba(0,0,0,.50))
      drop-shadow(0 0 6px rgba(24,201,104,.42));
    transform:translateY(-3px) scale(1.015);
  }
  #maincontent .row.mb-3.g-1>[class*="col-"]>a:hover>img,
  #maincontent .row:has(> .col-6.col-md-4.col-lg-3.col-xl-2 img)>[class*="col-"]>a:hover>img{
    filter:brightness(1.05) saturate(1.04);
    transform:scale(1.02);
  }
}

/* =========================================================
   PROVIDER / PAYMENT PANELS
   ========================================================= */
#maincontent .glassmorphism{
  color:var(--efek88-white);
  background:linear-gradient(145deg,rgba(15,75,41,.62),rgba(3,15,8,.84)) !important;
  border:1px solid rgba(24,201,104,.45) !important;
  border-radius:0 !important;
  clip-path:var(--efek88-cut-sm);
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 5px 12px rgba(0,0,0,.24);
}
#maincontent .row.g-1 .glassmorphism{
  display:grid;
  place-items:center;
  min-height:64px;
  padding:12px 5px !important;
}
#maincontent .row.g-1 .glassmorphism img{
  width:auto;height:auto;
  max-width:min(100px,88%) !important;
  max-height:32px;
  object-fit:contain;
}

/* =========================================================
   PROVIDER BUTTONS
   ========================================================= */
#maincontent #selectProvider.row>[class*="col-"]{display:grid}
#maincontent #selectProvider.row>[class*="col-"]>a.btn{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  height:42px;
  min-height:42px;
  padding:6px 10px !important;
  color:#eafff1 !important;
  background:linear-gradient(145deg,#155d37 0%,#0a2e1b 55%,#06150c 100%) !important;
  border:1px solid var(--efek88-green) !important;
  border-radius:0 !important;
  clip-path:var(--efek88-cut-sm) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 9px rgba(0,0,0,.35) !important;
}
#maincontent #selectProvider.row>[class*="col-"]>a.btn.active,
#maincontent #selectProvider.row>[class*="col-"]>a.btn:hover{
  color:#031109 !important;
  background:linear-gradient(135deg,#8affb5,var(--efek88-green),#0b8f48) !important;
  border-color:#8affb5 !important;
}

/* =========================================================
   SEARCH / PAGINATION
   ========================================================= */
#maincontent .container>.row.my-3:has(input[name="q"]):has(.pagination){
  align-items:center;
  margin:15px 0 24px !important;
  padding:10px 7px;
  background:rgba(3,12,7,.88);
  border:1px solid rgba(24,201,104,.42);
  border-radius:10px;
  box-shadow:var(--efek88-shadow);
}
#maincontent .container>.row.my-3:has(.pagination) input.form-control[name="q"]{
  width:100%;
  min-height:44px;
  padding:10px 15px !important;
  color:#fff !important;
  background:rgba(5,16,9,.94) !important;
  border:1px solid rgba(24,201,104,.48) !important;
  border-radius:7px !important;
  clip-path:none !important;
}
#maincontent .container>.row.my-3:has(input[name="q"]) nav:has(>ul.pagination){
  justify-content:flex-end;
  margin:0 !important;
  padding:3px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#maincontent .container>.row.my-3:has(input[name="q"]) .pagination .page-link{
  min-width:36px;
  min-height:36px;
  padding:6px 9px;
  font-size:12px;
  color:#dfffea;
  background:#0a1b11;
  border-color:rgba(24,201,104,.30);
}
#maincontent .container>.row.my-3:has(input[name="q"]) .pagination .active .page-link{
  color:#031109;
  background:var(--efek88-green);
  border-color:var(--efek88-green-light);
}

/* =========================================================
   GAME TYPE FILTER
   ========================================================= */
#maincontent .container>.my-3:has(>a.btn.btn-outline-primary[href*="gameType"]){
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:18px 0 !important;
  padding:12px;
  background:rgba(3,12,7,.86);
  border:1px solid rgba(24,201,104,.42);
  border-radius:10px;
  box-shadow:var(--efek88-shadow);
}
#maincontent .container>.my-3>a.btn.btn-outline-primary[href*="gameType"]{
  min-width:82px;
  min-height:40px;
  padding:9px 15px !important;
  color:#fff !important;
  font-size:13px;
  font-weight:800;
  background:linear-gradient(145deg,#155d37,#0a2e1b 55%,#06150c) !important;
  border:1px solid rgba(24,201,104,.50) !important;
  border-radius:0 !important;
  clip-path:var(--efek88-cut-sm) !important;
}
#maincontent .container>.my-3>a.btn.btn-outline-primary[href*="gameType"]:first-child{
  color:#031109 !important;
  background:linear-gradient(135deg,#8affb5,var(--efek88-green),#0b8f48) !important;
  border-color:#a8ffc7 !important;
}

/* =========================================================
   TOGEL / MARKET CARDS
   ========================================================= */
#maincontent .card.border.rounded-4.border-5.border-primary,
#carousel-togel .card.border.rounded-3.border-primary{
  color:#fff;
  background:linear-gradient(145deg,#103820,#07170d 58%,#041009) !important;
  border-color:var(--efek88-green) !important;
  border-radius:0 !important;
  clip-path:var(--efek88-cut-md);
  box-shadow:var(--efek88-shadow);
  transition:transform .20s ease,filter .20s ease;
}
@media (hover:hover) and (pointer:fine){
  #maincontent .card.border.rounded-4.border-5.border-primary:hover,
  #carousel-togel .card.border.rounded-3.border-primary:hover{
    transform:translateY(-4px) scale(1.015);
    filter:drop-shadow(0 7px 12px rgba(0,0,0,.50)) drop-shadow(0 0 7px rgba(24,201,104,.42));
  }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  position:relative;
  margin-top:32px;
  padding:22px 12px 18px !important;
  color:var(--efek88-muted);
  background:linear-gradient(180deg,rgba(10,39,22,.45),rgba(3,10,6,.96));
  border-top:1px solid var(--efek88-border);
}
.footer::before{
  content:"";
  position:absolute;
  top:-2px;
  left:50%;
  width:min(260px,70%);
  height:3px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--efek88-green-light),transparent);
  box-shadow:0 0 8px rgba(24,201,104,.45);
}

/* =========================================================
   MOBILE BOTTOM NAV
   ========================================================= */
nav.menubar.fixed-bottom{
  position:fixed !important;
  top:auto !important;right:0 !important;bottom:0 !important;left:0 !important;
  z-index:1080;
  display:flex !important;
  min-height:72px;
  padding:3px 0 calc(3px + env(safe-area-inset-bottom)) !important;
  background:linear-gradient(180deg,#0c2a19,#06140c) !important;
  border-top:2px solid var(--efek88-green);
  border-bottom:0;
  box-shadow:0 -6px 20px rgba(0,0,0,.50);
}
nav.menubar.fixed-bottom .flex-grow-1>a{
  color:var(--efek88-muted) !important;
}
nav.menubar.fixed-bottom .flex-grow-1>a.active,
nav.menubar.fixed-bottom .flex-grow-1>a:hover{
  color:var(--efek88-green-light) !important;
}
nav.menubar.fixed-bottom .flex-grow-1>a img{
  filter:drop-shadow(0 0 4px rgba(24,201,104,.20));
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1199.98px){
  #content{margin-top:70px !important}
  #maincontent>.container,#maincontent .container{padding-right:10px;padding-left:10px}
}

@media (max-width:767px){
  #maincontent .container>.my-3:has(>a.btn.btn-outline-primary[href*="gameType"]){
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  #maincontent .container>.my-3>a.btn.btn-outline-primary[href*="gameType"]{
    flex:0 0 auto;
    min-width:max-content;
    min-height:37px;
    padding:8px 13px !important;
    font-size:12px;
  }
  #maincontent .container>.row.my-3:has(input[name="q"]):has(.pagination){
    gap:8px;
    padding:10px 6px;
  }
  #maincontent .container>.row.my-3:has(input[name="q"]):has(.pagination)>.col-lg-6{
    width:100%;
    padding:0 5px !important;
  }
  #maincontent .container>.row.my-3:has(input[name="q"]) nav:has(>ul.pagination){
    justify-content:flex-start;
    width:100%;
    overflow-x:auto;
  }
  #maincontent .container>.row:has(> .col-6.col-md-4.col-lg-3.col-xl-2 img){
    --bs-gutter-x:6px;
    --bs-gutter-y:6px;
  }
}

@media (max-width:575.98px){
  #navbar-top>.container{
    grid-template-columns:46px minmax(0,1fr) 46px;
    padding-right:10px;
    padding-left:10px;
  }
  #sidebarCollapse{width:44px;height:40px}
  #navbar-imglogo{max-width:calc(100% - 32px) !important;max-height:38px !important}
  #row-quicklogin .card-body{padding:15px}
  #maincontent .row.g-1 .glassmorphism{min-height:58px;padding:10px 4px !important}
}

@media (max-width:359.98px){
  #navbar-top>.container{
    grid-template-columns:42px minmax(0,1fr) 42px;
    padding-right:6px;padding-left:6px;
  }
  #sidebarCollapse{width:40px;height:37px}
  #navbar-imglogo{max-width:calc(100% - 24px) !important;max-height:34px !important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

/* Avoid expensive visual effects on touch devices */
@media (hover:none){
  .game-card:hover,
  #maincontent .row.mb-3.g-1>[class*="col-"]>a:hover{
    transform:none;
    filter:none;
  }
}