/* Games page - reference layout (colours sampled from the reference screenshots) */
html[data-page="games"] body,html[data-page="games"] .page-wrapper,html[data-page="games"] .page-content{background:#0e2648!important;}
html[data-page="games"] .container.gx-container{max-width:none!important;width:auto!important;padding:0!important;margin:0!important;}
html[data-page="games"] .mob-cat-nav,html[data-page="games"] .cat-hero,html[data-page="games"] .game-hero{display:none!important;}

.gx{color:#fff;}
/* search band */
.gx-search{padding:10px 11px;background:linear-gradient(180deg,#295ab9 0%,#1b4aa6 100%);}
.gx-search__input{display:block;width:100%;height:38px;box-sizing:border-box;padding:0 18px;border:1px solid #0c336c;border-radius:4px;
  background:#0b3462;color:#fff;font-size:16px;outline:0;-webkit-appearance:none;appearance:none;}
.gx-search__input::placeholder{color:#8ca3c4;opacity:1;}
.gx-search__input::-webkit-search-cancel-button{-webkit-appearance:none;}
.gx-search__input:focus{border-color:#f4b600;}

.gx-body{padding:12px 11px 24px;}
/* jackpot (numbers sit on the banner's empty boxes) */
.gx-jp{position:relative;margin:0 0 12px;border-radius:4px;overflow:hidden;container-type:inline-size;line-height:0;}
.gx-jp img{display:block;width:100%;height:auto;}
.gx-jp__v{position:absolute;transform:translate(-50%,-50%);color:#fff;font-weight:600;line-height:1;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.45);font-variant-numeric:tabular-nums;letter-spacing:.2px;}
.gx-jp__v--grand{left:34.2%;top:43.6%;font-size:6.9cqw;}
.gx-jp__v--mini{left:19%;top:79.3%;font-size:4.3cqw;}
.gx-jp__v--major{left:49.7%;top:79.3%;font-size:4.3cqw;}

/* provider pills */
.gx-pills{margin:0 0 14px;padding:12px 12px 8px;border-radius:6px;background:#19427a;}
.gx-pills__row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.gx-pills__row::-webkit-scrollbar{display:none;}
.gx-pill{flex:none;display:inline-flex;align-items:center;gap:2px;height:30px;padding:0 12px;border-radius:4px;background:#1c4d90;
  color:#cfdcee!important;font-size:13px;font-weight:400;text-decoration:none!important;white-space:nowrap;}
.gx-pill i{font-style:normal;font-size:12px;}
.gx-pill.is-on{background:#f3b701;color:#2a1d00!important;}
.gx-pills__track{position:relative;height:3px;margin-top:9px;border-radius:2px;background:#2b4f7f;overflow:hidden;}
.gx-pills__track i{position:absolute;left:0;top:0;bottom:0;width:20%;border-radius:2px;background:#6e7f9b;}

/* title + sort */
.gx-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;scroll-margin-top:70px;}
.gx-head__title{margin:0;font-size:20px;font-weight:700;color:#fff;line-height:1.2;}
.gx-sort{position:relative;flex:none;}
.gx-sort__btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:116px;height:31px;padding:0 9px 0 11px;border:0;border-radius:4px;
  background:#18407d;color:#c9d6ea;font-size:13px;cursor:pointer;}
.gx-sort__btn i{width:8px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s;}
.gx-sort.is-open .gx-sort__btn i{transform:translateY(2px) rotate(-135deg);}
.gx-sort__menu{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:116px;margin:0;padding:0;list-style:none;border-radius:4px;overflow:hidden;
  background:#18407b;box-shadow:0 6px 16px rgba(0,0,0,.35);}
.gx-sort.is-open .gx-sort__menu{display:block;}
.gx-sort__menu li{height:38px;display:flex;align-items:center;padding:0 11px;color:#a9bad3;font-size:13px;cursor:pointer;}
.gx-sort__menu li.is-on{background:#f4b600;color:#290b00;}
.gx-sort__menu li:not(.is-on):hover{background:#1f4b8f;}

/* game cards */
.gx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 11px;}
@media (min-width:640px){ .gx-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (min-width:1024px){ .gx-body{padding:16px 20px 30px;} .gx-search{padding:12px 20px;} .gx-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;} .gx-jp{max-width:760px;} }
.gx-card{position:relative;border-radius:4px;overflow:hidden;background:#17417d;}
.gx-card__img{position:relative;display:block;aspect-ratio:246/172;background:#13366b;overflow:hidden;}
.gx-card__img img{display:block;width:100%;height:100%;object-fit:cover;}
.gx-card__img b{display:none;}
.gx-card__img.is-noimg{display:flex;align-items:center;justify-content:center;padding:8px;background:linear-gradient(135deg,#1d4f9c,#0f2f63);}
.gx-card__img.is-noimg b{display:block;color:#fff;font-size:14px;font-weight:600;text-align:center;}
.gx-card__foot{display:flex;align-items:center;gap:6px;height:34px;padding:0 6px 0 11px;background:#17417d;}
.gx-card__name{flex:1;min-width:0;color:#fff;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gx-card__star{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;}
.gx-card__star svg{width:19px;height:19px;fill:#4d6998;stroke:#2c5089;stroke-width:1.3;stroke-linejoin:round;}
.gx-card.is-fav .gx-card__star svg{fill:#f4b600;stroke:#c98a00;}

.gx-empty{padding:30px 0;text-align:center;color:#8ca3c4;font-size:14px;}
.gx-more{height:1px;}
.gx-end{display:flex;align-items:center;justify-content:center;gap:4px;margin:16px 0 0;color:#8b9ab1;font-size:12px;}
.gx-end::before,.gx-end::after{content:"";width:10px;height:1px;background:#8b9ab1;}

/* light theme */
html.mp-light .gx-head__title{color:#1d2b4a;}

/* stronger than the global input / button rules */
html[data-page="games"] body .gx-search__input{background:#0b3462!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border:1px solid #0c336c!important;border-radius:4px!important;box-shadow:none!important;height:38px!important;padding:0 18px!important;font-size:16px!important;}
html[data-page="games"] body .gx-search__input::placeholder{color:#8ca3c4!important;-webkit-text-fill-color:#8ca3c4!important;}
html[data-page="games"] body .gx-sort__btn{background:#18407d!important;color:#c9d6ea!important;-webkit-text-fill-color:#c9d6ea!important;border:0!important;box-shadow:none!important;font-size:13px!important;font-weight:400!important;}
html[data-page="games"] body .gx-card__star{background:none!important;border:0!important;box-shadow:none!important;}
/* search band starts right under the fixed header */
html[data-page="games"] .gx{padding-top:16px;}
html[data-page="games"] .gx-search{margin-top:-16px;}
/* phones, logged in: header = menu + centred logo (reference) */
@media (max-width:1023px){
  html[data-page="games"] .page-wrapper{padding-top:56px!important;}
  html[data-page="games"] .gx{padding-top:0;}
  html[data-page="games"] .gx-search{margin-top:0;}
  html.mp-auth[data-page="games"] .header__actions{display:none!important;}
  html[data-page="games"] .header .logo-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0!important;}
  html[data-page="games"] .header .header__inner{position:relative;}
}

/* phones: nothing after "end of page" (reference) - logged-in players still get the bottom menu */
@media (max-width:1023px){
  html[data-page="games"] footer,html[data-page="games"] .footer,html[data-page="games"] .site-footer,html[data-page="games"] .mp-foot{display:none!important;}
  html[data-page="games"] .gx-body{padding-bottom:20px;}
}
