/* ===== POLYFILL ===== */
.rounded-4{border-radius:1rem!important;}

/* ===== OVERRIDE BOOTSTRAP PRIMARY ===== */
:root{
  --bs-primary:#216fdb;
  --bs-primary-rgb:33,111,219;
}
.btn-primary{background-color:#216fdb;border-color:#216fdb;}
.btn-primary:hover,.btn-primary:focus{background-color:#1b5cb5;border-color:#1b5cb5;}
.btn-primary:active{background-color:#174fa0;border-color:#174fa0;}
.btn-outline-primary{color:#216fdb;border-color:#216fdb;}
.btn-outline-primary:hover,.btn-outline-primary:focus{background-color:#216fdb;border-color:#216fdb;color:#fff;}
.btn-outline-primary:active{background-color:#1b5cb5;border-color:#1b5cb5;color:#fff;}
.text-primary{color:#216fdb!important;}
.bg-primary{background-color:#216fdb!important;}
.border-primary{border-color:#216fdb!important;}
a.text-primary:hover{color:#1b5cb5!important;}
.badge-new,.game-card .badge-genre,.game-card .play-btn{background-color:rgba(33,111,219,.9);}
.page-header::after{background:#216fdb;}
.sidebar-box h5{border-bottom-color:#216fdb;}
.tag-list a:hover{background:#216fdb;}
.games-dots .dot.active{background:#216fdb;}
.games-dots .dot:hover{background:#216fdb;}
.games-controls-bottom button{background:#216fdb;}
.games-controls-bottom button:hover{background:#1b5cb5;}

/* ===== COMMON ===== */
html,body{margin:0;padding:0;overflow-x:hidden;}
body{font-family:'Inter',sans-serif;color:#212529;background:#fff;}
h1,h2,h3,h4,h5,h6{font-family:'Inter',sans-serif;font-weight:700;}
.rounded-img{border-radius:.75rem;overflow:hidden;}
.section{padding:64px 0;}
.section-title{font-weight:700;margin-bottom:.5rem;}
.section-sub{color:#6c757d;margin-bottom:2rem;}

@media (max-width: 767px) {
  .container{padding-left:15px;padding-right:15px;max-width:100%;}
  .section{padding:40px 0;}
  .header-wrap{min-height:60vh !important;}
  .hero{padding:10px 0;}

  /* Game card mobile layout */
  .game-info{align-items:center;text-align:center;padding:1rem;}
  .game-action-row{flex-direction:column;align-items:center;gap:.5rem;}
  .game-icon{width:60px;height:60px;margin:0;}
  .game-text{width:100%;}
  .game-text .title{white-space:normal;overflow:visible;text-overflow:clip;}
  .game-text .play-now{width:100%;margin-top:0;display:block;font-size:.75rem;padding:.35rem .4rem;border-radius:5px !important;white-space:nowrap !important;line-height:1.2;}
  .game-text .play-now i{display:none;}
}

/* ===== TOP BAR ===== */
.top-bar{
  background:#1a1d21;
  padding:.35rem 0;
  font-size:.8rem;
  margin:0;border:none;line-height:1;
}
.top-bar a{
  color:rgba(255,255,255,.75);
  text-decoration:none;
  transition:.2s;
}
.top-bar a:hover{color:#fff;}
.top-bar a + a{margin-left:1.25rem;}

/* ===== NAVBAR (transparent, white text) ===== */
.navbar-trans{background:transparent!important;padding:1rem 0;}
.navbar-trans .navbar-brand{color:#fff!important;font-weight:900;letter-spacing:.5px;font-size:1.5rem;}
.navbar-trans .navbar-brand img{height:36px;}
footer .footer-logo{height:32px;}
.navbar-trans .nav-link{color:rgba(255,255,255,.85)!important;font-weight:500;padding:.5rem 1rem!important;}
.navbar-trans .nav-link.active,
.navbar-trans .nav-link:hover{color:#ffc107!important;}
.navbar-trans .btn-outline-light{border-color:rgba(255,255,255,.5);color:#fff;font-weight:500;}
.navbar-trans .btn-outline-light.active,
.navbar-trans .btn-outline-light:hover{background:#fff;color:#216fdb;border-color:#fff;}
.navbar-trans .navbar-toggler{border-color:rgba(255,255,255,.5);}
.navbar-trans .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-trans .dropdown-menu{z-index:1050;}

/* ===== PAGE HEADER (sub-pages) ===== */
.page-header{
  position:relative;
  background:url('../images/bg.png') center top/cover no-repeat;
  padding:0 0 60px;color:#fff;
}
/* .page-header::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,15,30,.3) 0%,rgba(10,15,30,.5) 100%);
} */
.page-header::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:4px;
  background:#216fdb;z-index:2;
}
.page-header > *{position:relative;z-index:1;}

/* ===== HEADER WRAP (index full-screen hero) ===== */
.header-wrap{
  position:relative;margin-top:0;overflow:hidden;
  background:url('../images/bg.png') center center/cover no-repeat;
  color:#fff;min-height:40vh;display:flex;flex-direction:column;
}
/* .header-wrap::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,15,30,.3) 0%,rgba(10,15,30,.5) 100%);
  z-index:0;
} */
.header-wrap::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:160px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 40%,rgba(255,255,255,.7) 75%,#f8f9fa 100%);
  z-index:1;pointer-events:none;
}
.header-wrap > *{position:relative;z-index:1;}

/* ===== HERO ===== */
.hero{flex:1;display:flex;align-items:center;justify-content:center;padding:20px 0;}
.hero-title-wrap{transform:translateY(-70px);}
.hero h1{
  font-size:4rem;margin:0;
}
.hero-title-aio{
  background:linear-gradient(90deg, #2a86e0 0%, #51eafc 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-title-white{-webkit-text-fill-color:#fff;color:#fff;}
.hero-slogan{color:#fff;font-size:1.1rem;font-weight:500;margin:15px 0 0 0;}
.hero p.lead{color:rgba(255,255,255,.9);text-shadow:0 1px 8px rgba(0,0,0,.4);max-width:720px;margin:0 0 1.5rem 0;font-size:1rem;}
.hero .btn-light{font-weight:500;}
.hero-icon{
  max-width:100%;
  height:auto;
  animation:float 3s ease-in-out infinite;
}

@keyframes float{
  0%,100%{transform:translateY(0px);}
  50%{transform:translateY(-20px);}
}

@media (min-width: 768px) {
  .hero{padding:40px 0;}
  .hero h1{font-size:6rem;}
  .hero p.lead{font-size:1.15rem;}
  .hero-slogan{font-size:1.5rem;}
}

@media (max-width: 991px) {
  .header-wrap{background-image:url('../images/bg_mobile.png');}
  .page-header{background-image:url('../images/bg_mobile.png');}
  .hero{text-align:left;}
  .hero-title-wrap{transform:translateY(-20px);}
  .hero h1{text-align:left;font-size:2.4rem;}
  .hero p.lead{text-align:left;}
  .hero-icon{max-width:180px;margin:0;transform:translateY(-20px);animation:none;}
  .hero .row{align-items:center;}
}

/* Scroll down indicator */
.scroll-down{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:1.8rem;animation:bounce 2s infinite;
  text-decoration:none;opacity:.85;z-index:2;
}
.scroll-down:hover{color:#ffc107;}
@keyframes bounce{
  0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0);}
  40%{transform:translateX(-50%) translateY(-12px);}
  60%{transform:translateX(-50%) translateY(-6px);}
}

/* ===== GAME CARDS (shared) ===== */
.game-wrap{
  position:relative;border-radius:.75rem;overflow:hidden;cursor:pointer;
  aspect-ratio:3/4;background:#000;transition:.25s;
  box-shadow:0 .25rem .75rem rgba(0,0,0,.08);
}
.game-wrap:hover{transform:translateY(-4px);box-shadow:0 .75rem 1.5rem rgba(0,0,0,.15);}
.game-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.5s;}
.game-wrap:hover .game-bg{transform:scale(1.06);}
.game-overlay{
  position:absolute;left:0;right:0;bottom:0;top:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.9) 100%);
}
.game-info{position:absolute;left:0;right:0;bottom:0;padding:1rem;color:#fff;}
.game-icon{width:46px;height:46px;border-radius:5px;object-fit:cover;box-shadow:0 .25rem .5rem rgba(0,0,0,.3);display:block;margin:0;}
.game-action-row{display:flex;align-items:center;gap:.5rem;margin-top:.35rem;}
.game-text .play-now{border-radius:5px !important;white-space:nowrap;}
.game-text{width:100%;min-width:0;line-height:1.2;}
.game-text .title{font-size:1rem;font-weight:700;color:#fff;margin:0;text-shadow:0 1px 3px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.game-text .players{font-size:.75rem;color:rgba(255,255,255,.85);margin:0;display:flex;align-items:center;gap:.3rem;}

/* Game card (category page) */
.game-card{
  position:relative;border-radius:.75rem;overflow:hidden;
  aspect-ratio:3/4;background:#000;transition:.3s;
  box-shadow:0 .25rem .75rem rgba(0,0,0,.1);display:block;text-decoration:none;
}
.game-card:hover{transform:translateY(-5px);box-shadow:0 1rem 2rem rgba(0,0,0,.18);}
.game-card img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.5s;}
.game-card:hover img.bg{transform:scale(1.06);}
.game-card .play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:rgba(13,110,253,.85);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.4rem;z-index:2;transition:.3s;
  box-shadow:0 .5rem 1.5rem rgba(0,0,0,.3);
}
.game-card:hover .play-btn{background:rgba(13,110,253,1);transform:translate(-50%,-50%) scale(1.1);}
.game-card .overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.5) 65%,rgba(0,0,0,.9) 100%);
}
.game-card .info{position:absolute;left:0;right:0;bottom:0;padding:1rem;display:flex;align-items:center;gap:.75rem;color:#fff;}
.game-card .icon{width:46px;height:46px;border-radius:5px;flex-shrink:0;object-fit:cover;box-shadow:0 .25rem .5rem rgba(0,0,0,.3);}
.game-card .text{flex:1;min-width:0;line-height:1.2;}
.game-card .text h6{font-size:1rem;font-weight:700;color:#fff;margin:0 0 .25rem 0;text-shadow:0 1px 3px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.game-card .text p{font-size:.75rem;color:rgba(255,255,255,.85);margin:0;display:flex;align-items:center;gap:.3rem;}
.game-card .badge-genre{
  position:absolute;top:.75rem;left:.75rem;
  background:rgba(13,110,253,.9);color:#fff;font-size:.7rem;font-weight:600;
  padding:.25rem .6rem;border-radius:.4rem;letter-spacing:.3px;z-index:1;
}

/* ===== CAROUSEL (index) ===== */
.games-slider{position:relative;overflow:hidden;width:100%;height:520px;}
.games-track{position:absolute;inset:0;}
.games-track .game-wrap{
  position:absolute;top:50%;left:50%;width:220px;
  transition:transform .6s cubic-bezier(.4,.2,.2,1),opacity .5s ease;
  will-change:transform,opacity;
}
@media(max-width:992px){.games-slider{height:440px;}.games-track .game-wrap{width:170px;}}
@media(max-width:768px){.games-slider{height:380px;}.games-track .game-wrap{width:130px;}}
@media(max-width:480px){.games-slider{height:360px;}.games-track .game-wrap{width:140px;}}

.games-controls-bottom{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1.5rem;}
.games-controls-bottom button{
  width:44px;height:44px;border-radius:50%;border:none;
  background:#216fdb;color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:1.1rem;transition:.2s;cursor:pointer;
}
.games-controls-bottom button:hover{background:#1b5cb5;transform:translateY(-2px);}
.games-dots{display:flex;gap:.5rem;align-items:center;}
.games-dots .dot{width:10px;height:10px;border-radius:50%;background:#c9d2e3;border:none;padding:0;cursor:pointer;transition:.25s;}
.games-dots .dot.active{background:#216fdb;width:28px;border-radius:10px;}
.games-dots .dot:hover{background:#216fdb;opacity:.7;}

/* ===== NEWS (index) ===== */
.news-feature{
  border:1px solid #dee2e6;border-radius:.75rem;overflow:hidden;background:#fff;
  transition:.25s;height:100%;display:flex;flex-direction:column;text-decoration:none;color:inherit;
}
.news-feature:hover{box-shadow:0 .5rem 1.5rem rgba(0,0,0,.12);transform:translateY(-3px);color:inherit;}
.news-feature:hover h4{color:#216fdb;}
.news-feature-img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.news-feature-body{padding:1.5rem;flex:1;display:flex;flex-direction:column;}
.news-feature-body h4{font-size:1.65rem;font-weight:700;line-height:1.3;margin-bottom:.75rem;}
.news-feature-body .excerpt{color:#6c757d;flex:1;margin-bottom:1rem;}
.news-feature .badge-new{
  display:inline-block;background:#216fdb;color:#fff;font-size:.7rem;font-weight:600;
  padding:.25rem .6rem;border-radius:.4rem;margin-bottom:.75rem;width:fit-content;letter-spacing:.5px;
}
.news-side-list{display:flex;flex-direction:column;gap:1rem;height:100%;}
.news-side{
  display:flex;gap:0;padding:0;border:1px solid #dee2e6;border-radius:.75rem;
  background:#fff;transition:.2s;text-decoration:none;color:inherit;flex:1;min-height:0;overflow:hidden;
}
.news-side:hover{box-shadow:0 .25rem .75rem rgba(0,0,0,.08);color:inherit;}
.news-side:hover h6{color:#216fdb;}
.news-side-thumb{height:100%;width:200px;object-fit:cover;flex-shrink:0;display:block;}
.news-side-body{flex:1;min-width:0;display:flex;flex-direction:column;padding:1rem;}
.news-side-body h6{font-size:1.15rem;font-weight:600;line-height:1.35;margin-bottom:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-side-body p{color:#6c757d;font-size:.825rem;line-height:1.4;margin-bottom:.35rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-side-body .date{color:#6c757d;font-size:.75rem;font-weight:500;margin-top:auto;}
@media(max-width:480px){.news-side-thumb{width:90px;}.news-side-body{padding:.75rem;}}

/* ===== NEWS CARD (category page) ===== */
.news-card{
  border:1px solid #dee2e6;border-radius:.75rem;overflow:hidden;
  background:#fff;transition:.25s;text-decoration:none;color:inherit;display:flex;flex-direction:row;
}
.news-card:hover{box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);transform:translateY(-3px);color:inherit;}
.news-card .thumb{width:280px;aspect-ratio:4/3;object-fit:cover;flex-shrink:0;}
.news-card .body{padding:1.25rem;flex:1;display:flex;flex-direction:column;min-width:0;}
.news-card .body h5{font-size:1.5rem;font-weight:700;line-height:1.35;margin-bottom:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-card .body .excerpt{color:#6c757d;font-size:.9rem;line-height:1.5;margin-bottom:.75rem;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-card .body .meta{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:#6c757d;}
.news-card .body .meta .read-more{color:#216fdb;font-weight:500;text-decoration:none;}
.news-card .body .meta .read-more:hover{text-decoration:underline;}
@media(max-width:576px){.news-card{flex-direction:column;}.news-card .thumb{width:100%;aspect-ratio:16/9;}}

/* ===== ARTICLE (view_post) ===== */
.article-wrap{background:#fff;border-radius:.75rem;padding:2rem;box-shadow:0 .125rem .5rem rgba(0,0,0,.06);}
.article-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:.75rem;margin-bottom:1.5rem;}
.article-meta{display:flex;align-items:center;gap:1.5rem;color:#6c757d;font-size:.9rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #e9ecef;}
.article-meta i{margin-right:.3rem;}
.article-title{font-size:1.75rem;font-weight:700;line-height:1.35;margin-bottom:1rem;}
.article-content{font-size:1rem;line-height:1.8;color:#444;}
.article-content p{margin-bottom:1rem;}
.article-content h3{font-size:1.25rem;margin:1.5rem 0 .75rem;}
.article-content ul{padding-left:1.25rem;margin-bottom:1rem;}
.article-content li{margin-bottom:.4rem;}
.article-content img{max-width:100%;border-radius:.5rem;margin:1rem 0;}

/* ===== SIDEBAR ===== */
.sidebar-box{background:#fff;border-radius:.75rem;padding:1.5rem;box-shadow:0 .125rem .5rem rgba(0,0,0,.06);}
.sidebar-box h5{font-size:1.1rem;font-weight:700;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid #216fdb;}
.sidebar-item{display:flex;gap:.75rem;padding:.75rem 0;border-bottom:1px solid #f0f0f0;text-decoration:none;color:inherit;transition:.2s;}
.sidebar-item:last-child{border-bottom:none;}
.sidebar-item:hover{color:#216fdb;}
.sidebar-item img{width:130px;height:130px;object-fit:cover;border-radius:.5rem;flex-shrink:0;}
.sidebar-item .info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.sidebar-item .info h6{font-size:.9rem;font-weight:600;line-height:1.35;margin:0 0 .25rem 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sidebar-item .info small{color:#6c757d;font-size:.78rem;}

/* ===== TAGS ===== */
.tag-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #e9ecef;}
.tag-list a{display:inline-block;padding:.3rem .75rem;border-radius:2rem;background:#e9ecef;color:#495057;font-size:.8rem;text-decoration:none;transition:.2s;}
.tag-list a:hover{background:#216fdb;color:#fff;}

/* ===== FILTER TABS ===== */
.filter-tabs{margin-bottom:2rem;}
.filter-tabs .btn{
  border-radius:2rem;padding:.4rem 1.25rem;font-weight:500;font-size:.9rem;
  border:1px solid #dee2e6;background:#fff;color:#6c757d;transition:.2s;
}
.filter-tabs .btn:hover{border-color:#216fdb;color:#216fdb;}
.filter-tabs .btn.active{background:#216fdb;color:#fff;border-color:#216fdb;}

/* ===== PARTNERS ===== */
.partner-box{
  border:1px solid #dee2e6;border-radius:.75rem;padding:1.5rem;text-align:center;
  font-weight:500;color:#6c757d;background:#fff;transition:.2s;
  display:flex;align-items:center;justify-content:center;height:120px;
}
.partner-box:hover{border-color:#216fdb;box-shadow:0 .25rem .75rem rgba(0,0,0,.08);}
.partner-box img{max-height:60px;max-width:100%;object-fit:contain;filter:grayscale(30%);transition:.3s;}
.partner-box:hover img{filter:grayscale(0%);}

/* ===== FOOTER ===== */
footer{background:#0f172a;color:#adb5bd;}
footer a{color:#adb5bd;text-decoration:none;}
footer a:hover{color:#fff;}
footer h5{color:#fff;}

/* ===== FADE-IN ON SCROLL ===== */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease;will-change:opacity,transform;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal.delay-1{transition-delay:.1s}
.reveal.delay-2{transition-delay:.2s}
.reveal.delay-3{transition-delay:.3s}
.reveal.delay-4{transition-delay:.4s}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .hero h1{font-size:2rem;}
  .hero p.lead{font-size:1rem;}
}