/*
 * VIBE Games Hub 2.0
 */

.vgh2-hidden{
  display:none
    !important;
}


.vgh2{
  position:relative;

  margin:
    18px
    0
    20px;

  animation:
    vgh2-enter
    .28s
    ease-out;
}


.vgh2-head,
.vgh2-single{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:14px;

  margin-bottom:14px;
}


.vgh2-eyebrow{
  display:block;

  margin-bottom:4px;

  color:
    rgba(196,181,253,.78);

  font-size:9px;
  font-weight:900;

  letter-spacing:.14em;
}


.vgh2 h2{
  margin:0;

  font-size:20px;
  font-weight:900;
}


.vgh2-head p{
  margin:
    5px
    0
    0;

  color:
    var(
      --vb-muted,
      #94a3b8
    );

  font-size:11px;
}


.vgh2-filters{
  display:flex;

  flex-wrap:wrap;

  gap:7px;

  margin-bottom:13px;
}


.vgh2-filter,
.vgh2-back{
  min-height:34px;

  padding:
    0
    12px;

  border:
    1px solid
    rgba(148,163,184,.15);

  border-radius:10px;

  color:
    #cbd5e1;

  background:
    rgba(15,23,42,.52);

  font:inherit;

  font-size:10px;
  font-weight:850;

  cursor:pointer;

  transition:
    transform .14s ease,
    border-color .14s ease,
    background .14s ease,
    color .14s ease;
}


.vgh2-filter:hover,
.vgh2-back:hover{
  transform:
    translateY(-1px);

  border-color:
    rgba(139,124,255,.38);
}


.vgh2-filter.active{
  color:#ede9fe;

  border-color:
    rgba(139,124,255,.52);

  background:
    rgba(109,40,217,.18);

  box-shadow:
    inset 0 0 18px
    rgba(139,124,255,.06);
}


.vgh2-grid{
  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        210px,
        1fr
      )
    );

  gap:11px;
}


.vgh2-tile{
  position:relative;

  min-height:166px;

  padding:15px;

  display:flex;

  flex-direction:column;

  align-items:stretch;

  text-align:left;

  overflow:hidden;

  border:
    1px solid
    rgba(148,163,184,.12);

  border-radius:15px;

  color:inherit;

  background:
    linear-gradient(
      145deg,
      rgba(30,41,59,.76),
      rgba(15,23,42,.63)
    );

  cursor:pointer;

  transition:
    transform .17s ease,
    border-color .17s ease,
    box-shadow .17s ease,
    background .17s ease;
}


.vgh2-tile::before{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  opacity:0;

  background:
    radial-gradient(
      circle at 20% 0,
      rgba(139,124,255,.13),
      transparent 48%
    );

  transition:
    opacity .17s ease;
}


.vgh2-tile:hover:not(:disabled){
  transform:
    translateY(-3px);

  border-color:
    rgba(139,124,255,.36);

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.16);
}


.vgh2-tile:hover::before{
  opacity:1;
}


.vgh2-tile.is-live{
  border-color:
    rgba(248,113,113,.20);
}


.vgh2-tile.is-live::before{
  background:
    radial-gradient(
      circle at 20% 0,
      rgba(248,113,113,.13),
      transparent 48%
    );
}


.vgh2-tile:disabled{
  opacity:.45;

  cursor:not-allowed;
}


.vgh2-tile-top{
  position:relative;

  z-index:1;

  display:flex;

  justify-content:space-between;

  align-items:flex-start;

  gap:12px;
}


.vgh2-icon{
  display:inline-grid;

  place-items:center;

  min-width:38px;
  height:38px;

  font-size:23px;
}


.vgh2-tags{
  display:flex;

  flex-wrap:wrap;

  justify-content:flex-end;

  gap:5px;
}


.vgh2-tag{
  padding:
    4px
    6px;

  border-radius:999px;

  color:#cbd5e1;

  background:
    rgba(148,163,184,.08);

  font-size:8px;
  font-weight:900;

  letter-spacing:.04em;
}


.vgh2-tag.is-live{
  color:#fecaca;

  background:
    rgba(127,29,29,.30);

  animation:
    vgh2-live
    1.8s
    ease-in-out
    infinite;
}


.vgh2-title{
  position:relative;

  z-index:1;

  display:block;

  margin-top:13px;

  font-size:14px;
  font-weight:900;
}


.vgh2-description{
  position:relative;

  z-index:1;

  display:block;

  min-height:34px;

  margin-top:5px;

  color:
    var(
      --vb-muted,
      #94a3b8
    );

  font-size:10px;
  line-height:1.45;
}


.vgh2-open{
  position:relative;

  z-index:1;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:8px;

  margin-top:auto;

  padding-top:13px;

  color:#c4b5fd;

  font-size:9px;
  font-weight:900;
}


.vgh2-single{
  justify-content:flex-start;
}


.vgh2-single-title{
  display:flex;

  align-items:center;

  gap:9px;
}


.vgh2-single-title h2{
  font-size:17px;
}


.vgh2-empty{
  grid-column:
    1
    /
    -1;

  padding:24px;

  border:
    1px dashed
    rgba(148,163,184,.16);

  border-radius:14px;

  color:
    var(
      --vb-muted,
      #94a3b8
    );

  text-align:center;

  font-size:10px;
}


@keyframes vgh2-enter{

  from{
    opacity:0;

    transform:
      translateY(7px);
  }

  to{
    opacity:1;

    transform:
      translateY(0);
  }

}


@keyframes vgh2-live{

  0%,
  100%{
    box-shadow:
      0 0 0
      rgba(248,113,113,0);
  }

  50%{
    box-shadow:
      0 0 12px
      rgba(248,113,113,.13);
  }

}


@media(
  max-width:700px
){

  .vgh2-grid{
    grid-template-columns:1fr;
  }


  .vgh2-head{
    align-items:flex-start;
  }

}


@media(
  prefers-reduced-motion:
  reduce
){

  .vgh2,
  .vgh2 *,
  .vgh2 *::before,
  .vgh2 *::after{
    animation:none
      !important;

    transition:none
      !important;
  }

}