/* =====================================================
TOP NAVIGATION
===================================================== */

.top-menu{

  width:100%;

  display:flex;

  justify-content:center;

  align-items:center;

  flex-wrap:wrap;

  gap:14px;

  padding:14px 18px;

  background:
  rgba(8,12,20,.72);

  border-bottom:
  1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(10px);

  position:sticky;

  top:0;

  z-index:99999;

  box-shadow:
  0 8px 22px rgba(0,0,0,.28);
}

.top-menu a{

  display:inline-block;

  padding:10px 16px;

  border-radius:12px;

  background:
  rgba(255,255,255,.05);

  border:
  1px solid rgba(255,255,255,.08);

  color:#f8fafc;

  text-decoration:none;

  font-weight:700;

  letter-spacing:.3px;

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

.top-menu a:hover{

  transform:translateY(-2px);

  background:
  rgba(255,255,255,.12);

  color:#38bdf8;

  box-shadow:
  0 10px 22px rgba(0,0,0,.28);
}

/* =====================================================
GAME VERSION
===================================================== */

.top-menu.game-menu{

  padding:10px 12px;

  gap:10px;

  background:
  rgba(0,0,0,.45);
}

.top-menu.game-menu a{

  padding:8px 12px;

  font-size:13px;
}

/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:700px){

  .top-menu{

    gap:10px;

    padding:12px;
  }

  .top-menu a{

    width:100%;

    text-align:center;
  }
}