@font-face {
    font-family: 'Oxanium';
    src: url('../fonts/Oxanium-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: 'Interroman';
    src: url('../fonts/Interroman.woff2') format('woff2');
}
@font-face {
    font-family: 'Evosources';
    src: url('../fonts/Evosources.woff2') format('woff2');
}


:root {
  --tc-main: #ffffff;
  --bg-main: #151140;
  --bg-aside: #090532;
  --font-main: 'Interroman',sans-serif;
  --font-table: 'Evosources',sans-serif;
  --bg-placeholder: #090531;
  --bg-brand: #f76d09;
  --bg-brand: #49a1ff;
  --skew-x5: skewX(-10deg);
}

html {
    -webkit-text-size-adjust: 100%;
  }
body {
  margin: 0;

  background-color: var(--bg-main);
  background-position: 20px 20px;
}

h1, h2, h3, h4, h5, h6 {  
  color: var(--tc-main);
  font-family: var(--font-main);
  font-weight: 700;
}

a {
  user-select: none;
}


.logo {
  font-family: var(--font-main);
  /* font-style: italic; */
  text-transform: uppercase;
  text-align: center;
  font-weight: 900;
  grid-area: logo;
  /* display: none; */
  margin-left: 1rem;
  text-decoration: none;
  color: var(--tc-main);
  font-size: clamp(20px, 2vw, 1.6rem);
  margin-block: 1rem;
  animation: neonGlow 2s ease-in-out  alternate;
  animation-delay: .5s;
}




@keyframes neonGlow {
  0% {
    text-shadow: 
      0 0 5px #50191965,
      0 0 10px #ffffff26;
  }
  25% {
    text-shadow: 
      0 0 10px #ffffffaf,
      0 0 20px #ffffffaf,
      0 0 30px rgba(0, 255, 255, 0.39),
      0 0 40px rgba(0, 255, 255, 0.39);
  }
  100% {
    text-shadow: 
      0 0 5px #501919d2,
      0 0 10px #ffffff26;
  }
}

.logo-narrow {
  /* font-style: italic; */
  text-transform: uppercase;
  text-align: center;
  font-weight: 900;
  margin-left: 1rem;
  display: none;
}


:where(.logo,.logo-narrow) span {
  color: var(--bg-brand);
  position: relative;
  right: 0;
  animation: slideLeft 3s ease-out  alternate;
}




@keyframes slideLeft {
  0% {
    right: -5px;
    opacity: 0;
  }
 
  25% {
    right: 0;
    opacity: 1;
  }
  100% {
    right: 0;
  }
}

:where(.logo,.logo-narrow) span {
  color: var(--bg-brand);
  
}



/* layout */
.layout {
}

.main-content {
  /* padding: 0.5rem 0.5rem 0.5rem 0; */
  flex: 1;
}

/* aside */
aside {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-areas: 'logo wallet' 'search search' 'nav nav';
  grid-template-columns: auto 1fr;
  background: var(--bg-main);
  z-index: 999;
  column-gap: 1rem;

}

aside nav {
  grid-area: nav;
    overflow: auto;
  width: 100%;
}
aside nav ul {
  list-style: none;
  /* display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24%, 1fr)); */
  display: flex;
  column-gap: 0.25rem;
  padding: 0.25rem;
  margin: 0;
  justify-content: start;

}
aside nav ul li {
  line-height: 1;
  flex: 1 0 20%;
}

aside nav a {
  font-family: var(--font-main);
  color: var(--tc-main);
  text-align: center;
  text-decoration: none;
  display: block;
  color: #ffffff78;
  padding: 1rem;
  background: linear-gradient(0deg,rgba(62, 101, 193, 0) 0%, rgba(26, 50, 89, 0.64) 100%, rgba(25, 39, 71, 0.3) 67%);
  box-shadow: 0 0 5px #12102266;
  border-radius: 4px;
height: 100%;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

aside nav a span {
   display: block;
}
aside nav a span i {
    font-size: clamp(30px,2vw, 1em);
}
aside nav a span:nth-child(2) {
  text-transform: uppercase;
  font-weight: 700;
  font-size:  clamp(9px, 1.1vw, 0.725rem);
  display: flex;
  position: relative;
  justify-content: center;
}

aside nav a.active,
aside nav a:hover {
  color: var(--tc-main);
  background: linear-gradient(0deg,rgba(169, 87, 0, 0) 0%, rgb(0, 82, 169) 100%, rgba(132, 13, 157, 0.92) 67%) !important;
}

aside nav a.active,
aside nav a:active{
  color: var(--tc-main);
  background: linear-gradient(0deg,rgba(169, 87, 0, 0) 0%, rgb(0, 82, 169) 100%, rgba(132, 13, 157, 0.92) 67%) !important;
}
aside nav a:active{
  background: transparent !important;
}
/* aside nav a.active span:nth-child(2):before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: var(--skew-x5);
  background-color: var(--bg-brand);
} */

.wallet-info {
  font-size: clamp(9px, 3vw, 0.8rem);
  grid-area: wallet;
  align-self: center;
  justify-self: end;
  justify-self: auto;
  display: flex;
  justify-content: end;
  padding: 1rem;
  position: relative;
  gap: 1rem
}


.wallet-info *{
  display: flex;
  gap: 5px;
  align-items: center;
  font-family:  var(--font-main);
  color: #fff;
  font-weight: 700;
  margin:0;
 }

.wallet-info .money{
  color: gold;
}
.wallet-info i{
  color: inherit;
}

.section-title {
  border-bottom: 1px solid rgb(46, 42, 42);
  padding-bottom: 1rem
}

article.typography *>span{
  color: var(--bg-brand);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(153px, 1fr));
  padding: 0 .5rem; 
  gap: 1rem; 
  gap: 0.5rem;
}

.grid-item {
  color: var(--tc-main);
  /* min-height: 180px; */
  position: relative;
}

.grid-item:hover {
  opacity: .75;
}
.grid-item:active {
  opacity: 1;
}


.grid-title {
  margin-block: .5rem;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-family: var(--font-main);
  font-size: .875rem;
}
.grid-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.grid-summary p {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 12px;
  gap: 5px;
  font-family: var(--font-main);
}
.grid-summary p:has(.icon-casino) {
 color: gold;
}
.grid-summary p i{
}
.grid-item-media {
  position: relative;
  display: grid;
}
.grid-item-thumbnail {
  font-family: var(--font-main);
  background-image: url(../images/game-thumbnail.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border: 0;
  bottom: 0;
  left: 0;
  /* position: absolute; */
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.grid-item-road {
  position: absolute;
  width: 100%;
  bottom: 0;
}

/* buttons */
.bz-search {
  grid-area: search;  
  display: flex;
  gap: .5rem;
  /* margin: 0 0.25rem 0 0.5rem; */
  margin: 0 .25rem;
  margin: 0;
}
.bz-search > *{ 
  
}
.bz-search .bz-search-input{
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 30px;
  border-bottom: 1px solid #2e2963;
 
}
.bz-search .bz-search-input::before{
  content: '';
  position: absolute;
  background: var(--bg-placeholder);
  inset: 0;
  z-index: -1;
  /* min-height: 52px; */
}
.bz-search i{
  width: 50px;
  text-align: center;
  color: var(--bg-brand);
  position: absolute;
  left: 0;
  pointer-events: none;
}
.bz-search input{
  background: transparent;
  border: none;
  color: var(--tc-main);
  padding: 20px 0 20px 50px;
  padding-left: 50px;
  outline: none;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 1rem;
}
.bz-search button{
  border: none;
  background: transparent;
  color: var(--tc-main);
  position: relative;
  min-height: 52px;
  padding-inline: 20px;
}

.bz-search button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-brand);
  z-index: -1;
}
/* 
.bz-search button::after {
  content: "";
  position: absolute;
  inset: 0;
  left: 0px;
  background: var(--bg-brand);
  transform: var(--skew-x5);
  z-index: -1;
  left: 108%;
  z-index: -1;
  width: 13px;
} */

.topbar {
  padding: 0 .5rem;
  padding-left: 0.5rem;
  margin: 0;
  border-inline: 0;
  display: flex;
  align-items: center;
  margin-block: .5rem;
}
.topbar h1{
  margin: 0;
  font-size: clamp(26px,2vw,1rem);
}
.extra {
  min-height: 20px;
    background-color: orange;
}

@media (min-width: 768px) {
  .layout {
      display: flex;
  }
  
  
  aside {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 999;
    grid-template-areas: 'logo' 'search' 'nav' 'wallet' ;
    background: var(--bg-aside);
    align-content: start;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 100%;
  }

  aside nav {
    grid-area: nav;
  }
  aside nav ul {
    display: flex;
    flex-direction: column;
  }
  aside nav a {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .5rem 1rem;
    padding: 0.7rem 1.6rem;
    background: linear-gradient(0deg,rgba(62, 101, 193, 0.02) 0%, rgba(69, 72, 77, 0.27) 100%, rgba(25, 39, 71, 0.23) 67%);
    background: linear-gradient(0deg,rgba(62, 101, 193, 0) 0%, rgba(26, 50, 89, 0.64) 100%, rgba(25, 39, 71, 0.3) 67%);
    min-height: unset;
    border-radius: 0;
  }
  aside nav a.active span {
    text-shadow: 0 0 7px #ffffffe6;
  }
  aside nav a span:nth-child(2) {
    font-weight: 600;
    display: flex;
  }

  aside nav a span i {
    font-size: 18px;
  }

  .logo {
    margin-left: 0;
  }

  .logo-narrow {
    /* display: none; */
  }


  .wallet-info {
    flex-wrap: wrap;
    background: var(--bg-brand);
    margin: .5rem;
    background: #002040;
    gap: 0.3rem;
    padding: 1rem;
    margin: 0;
  }

  .wallet-info::before {
    content: '';
    position: absolute;
    transform: var(--skew-x5);
    background: unset;
    inset: 0 -6px 0;
    z-index: -1;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 10px;
  }
  .wallet-info > *{
    flex: 10 100%;
  }
  .wallet-info .users{
    order: 1;
  }
  .wallet-info .money{
    order: 2;
  }
  .main-content {
    padding: 0;
    
  }
  .bz-search {
    /* max-width: 20vw; */
  }
  .bz-search .bz-search-input{
    border-bottom: none;

  }
  .bz-search .bz-search-input::before{
    /* transform: var(--skew-x5); */
  }

  .bz-search button {
    min-height: 30px;
    }
  .bz-search button::before {
    /* transform: var(--skew-x5); */
  }

  .topbar {
   padding-left: 1rem;
   padding: 1rem;
    background: linear-gradient(0deg,rgba(62, 101, 193, 0.02) 0%, rgb(11, 8, 33) 100%, rgba(25, 39, 71, 0.23) 67%);
      background: linear-gradient(0deg,rgba(9, 5, 50, 0.56) 0%, rgb(9, 5, 50) 100%, rgba(25, 39, 71, 0) 67%);
    position: sticky;
    top: 0;
    z-index: 998;
    margin: 0;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    padding:  .5rem; 
  }
}